npm.io
0.8.0-alpha.112 • Published 10 months ago

@blaze-react/range-slider

Licence
GPL-3.0
Version
0.8.0-alpha.112
Deps
0
Size
796 kB
Vulns
0
Weekly
0

Description

Range slider allows the input of numeric values within a specific range. It can accept a single value, or a range of values (min/max).

Usage

  • With one moveable hander
<RangeSlider
    name="oneValue"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={15} />
  • With one moveable handler and custom step value
<RangeSlider
    name="step"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    step={5}
    value={15} />
  • With two moveable handlers
<RangeSlider
    name="twoValue"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={{ min: 3, max: 7 }} />
  • With two moveable handlers and draggable track
<RangeSlider
    draggableTrack
    name="draggableTrack"
    maxValue={20}
    minValue={0}
    onChange={() => { }}
    value={{ min: 3, max: 7 }} />

API

RangeSlider can receive a number of props as follow:
NAME TYPE DEFAULT
allowSameValues Boolean false
disabled Boolean false
draggableTrack Boolean false
maxValue Number 10
minValue Number 0
name String ''
onChange Function () => {}
step Number 1
value Number/Object 0