@s-ui/react-atom-slider

AtomSlider

AtomSlider is a component that works as an input that provides a slider a number or a set of two numbers (range)

Installation

$ npm install @s-ui/react-atom-slider --save

Usage

import AtomSlider from '@s-ui/react-atom-slider'

Basic usage

<AtomSlider/>

Basic usage with custom markers (only first and last position)

<AtomSlider
  min={1}
  max={9}
  marks={['1 km', '9 km']}
/>

Step 25 and default value 50

<AtomSlider step={25} value={50}/>

Disabled

<AtomSlider step={25} value={25} disabled />

Range Basic

<AtomSlider range />

Range Step 10

<AtomSlider range step={10} />

Capturing Value Change

<AtomSlider onChange={ (e, {value}) => console.log(value)} />

Find full description and more examples in the demo page.