@blaze-react/range-slider

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 no npm install needed!

<script type="module">
  import blazeReactRangeSlider from 'https://cdn.skypack.dev/@blaze-react/range-slider';
</script>

README

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