Skip to main content

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.