A horizontal track with a thumb that can be moved between a minimum and a maximum value.
You should have the chayns-components package installed. If that is not the
case already, run
yarn add chayns-componentsor
npm i chayns-componentsAfter the chayns-components package is installed, you can import the component
and use it with React:
import React from 'react'
import { Slider } from 'chayns-components';
// ...
<Slider {...} />The Slider-component takes the following props:
| Name | Type | Default | Required |
|---|---|---|---|
| min | number |
0 |
|
| max | number |
100 |
|
| step | number |
||
| showDots | boolean |
false |
|
| defaultValue | number |
0 |
|
| value | number |
||
| style | { [key: string]: number | string } |
||
| className | string |
||
| showLabel | boolean |
false |
|
| valueFormatter | function |
(value1, value2) => value2 ? ${Math.round(value1)} - ${Math.round(value2)} : Math.round(value1)
|
|
| labelStyle | { [key: string]: number | string } |
{ minWidth: '50px' } |
|
| onChangeStart | function |
||
| onChange | function |
||
| onChangeEnd | function |
||
| thumbStyle | { [key: string]: number | string } |
||
| disabled | boolean |
false |
|
| vertical | boolean |
false |
|
| interval | boolean |
false |
|
| minInterval | number |
||
| maxInterval | number |
||
| defaultStartValue | number |
0 |
|
| defaultEndValue | number |
0 |
|
| startValue | number |
||
| endValue | number |
||
| trackStyle | { [key: string]: number | string } |
||
| innerTrackStyle | { [key: string]: number | string } |
||
| showValueInThumb | boolean |
false |
|
| scaleOnDown | boolean |
||
| thumbWidth | number |
min?: numberThe minimum value of the slider.
max?: numberThe maximum value of the slider.
step?: numberThe amount of steps that the slider should be divided into.
showDots?: booleanWhether to show dots at the possible breakpoints
defaultValue?: numberA default value for the slider.
value?: numberThe current value of the slider.
style?: { [key: string]: number | string }A React style object that will be applied to root element.
className?: stringA classname string that will be applied to the root element.
showLabel?: booleanWether the label should be shown. Only applies to horizontal sliders.
valueFormatter?: functionA function to format the current value for display in the label.
labelStyle?: { [key: string]: number | string }A React style object that will be applied to the label.
onChangeStart?: functionA callback that is invoked when the user starts changing the value.
onChange?: functionA callback that is invoked when the user changes the value of the slider.
onChangeEnd?: functionA callback that is invoked when the user stops changing the slider value.
thumbStyle?: { [key: string]: number | string }A React style object that will be applied to the thumb.
disabled?: booleanWether to ignore any user interaction and render the slider with a disabled style.
vertical?: booleanWether the slider should be vertical instead of horizontal.
interval?: booleanWether the slider should select a range instead of a single value. This will add a second thumb for the user to adjust.
minInterval?: numberThe minimum range that can be selected by the two thumbs.
maxInterval?: numberThe maximum range that can be selected by the two thumbs.
defaultStartValue?: numberThe default value for the left thumb.
defaultEndValue?: numberThe default value for the right thumb.
startValue?: numberThe current value of the left thumb.
endValue?: numberThe current value of the right thumb.
trackStyle?: { [key: string]: number | string }A React style object that will be applied to the track.
innerTrackStyle?: { [key: string]: number | string }A React style object that will be applied ot the inner track.
showValueInThumb?: booleanWether the current value should be shown inside the thumb.
scaleOnDown?: booleanWether the slider should be scaled when the user grabs it on mobile devices.
thumbWidth?: numberThe width of the thumb.