Slider

Sliders allow users to select a range of data points. They’re useful for dynamic filtering, or selecting a specific value from a predefined range of values.

Example

Live Editor

function MySlider () { const [values, setValues] = useState([30, 90]); return <Slider kind='range' value={values} onChange={setValues} step={10} hasLegendWith={['$', 'left']} label='Label' labelIconTooltip={{ content: 'Label Tooltip', position: 'top' }} /> }

function MySlider () {
  const [values, setValues] = useState([30, 90]);

  return <Slider 
    kind='range' 
    value={values} 
    onChange={setValues} 
    step={10} 
    hasLegendWith={['$', 'left']} 
    label='Label'
    labelIconTooltip={{
      content: 'Label Tooltip',
      position: 'top'
    }}  />
}

Result

Loading...

Usage

Sliders are available in two basic kind: single (single value) and range (range select).

• You must specify the value, its type can be number for single or [number, number] for range.
• You can use onChange event as a callback to update the value.

Live Editor

function MySlider () { const [value, setValue] = useState(50); const [values, setValues] = useState([30, 90]); return ( <> <Slider kind='single' value={value} onChange={setValue} label='Single selection' /><br/> <Slider kind='range' value={values} onChange={setValues} label='Range selection' /> </> ) }

function MySlider () {
  const [value, setValue] = useState(50);
  const [values, setValues] = useState([30, 90]);
  
  return (
    <>
      <Slider kind='single' value={value} onChange={setValue} label='Single selection' /><br/>
      <Slider kind='range' value={values} onChange={setValues} label='Range selection' />
    </>
  )
}

Result

Loading...

Variants

Disabled

The slider can be disabled by adding prop disabled to the component.

Live Editor

function MySlider () { const [value, setValue] = useState(10); return <Slider kind='single' value={value} onChange={setValue} label='Label' disabled /> }

function MySlider () {
  const [value, setValue] = useState(10);

  return <Slider 
    kind='single' 
    value={value} 
    onChange={setValue} 
    label='Label'
    disabled
  />
}

Result

Loading...

Label

The slider can be used together with a label and an info tooltip by adding the props label and labelIconTooltip to the component.

Live Editor

function MySlider () { const [value, setValue] = useState(40); return <Slider kind='single' value={value} onChange={setValue} label='Label' labelIconTooltip={{ content: 'Label Tooltip', position: 'top' }} /> }

function MySlider () {
  const [value, setValue] = useState(40);

  return <Slider 
    kind='single' 
    value={value} 
    onChange={setValue} 
    label='Label'
    labelIconTooltip={{
      content: 'Label Tooltip',
      position: 'top'
    }} 
  />
}

Result

Loading...

Legend

The slider can be used with Legend to display the selected value(s) and there are two usages:

• To display the selected value(s) only, you can add the prop hasLegend (boolean) to the component.
• To display the selected value(s) with a symbol, you can add the prop hasLegendWith ([string, 'left' | 'right']) to the component and specify the position of the symbol.

Live Editor

function MySlider () { const [value1, setValue1] = useState(40); const [value2, setValue2] = useState([30, 80]); const [value3, setValue3] = useState([40, 70]); return (<> <Slider kind='single' value={value1} onChange={setValue1} label='Slider with Legend (no symbol)' hasLegend /> <Slider kind='range' value={value2} onChange={setValue2} label='Slider with Legend (symbol on the left)' hasLegendWith={['$', 'left']} /> <Slider kind='range' value={value3} onChange={setValue3} label='Slider with Legend (symbol on the right)' hasLegendWith={['$', 'right']} /> </>) }

function MySlider () {
  const [value1, setValue1] = useState(40);
  const [value2, setValue2] = useState([30, 80]);
  const [value3, setValue3] = useState([40, 70]);

  return (<>
    <Slider 
      kind='single' 
      value={value1}  
      onChange={setValue1}
      label='Slider with Legend (no symbol)'
      hasLegend
    />

    <Slider 
      kind='range' 
      value={value2}  
      onChange={setValue2}
      label='Slider with Legend (symbol on the left)'
      hasLegendWith={['$', 'left']}
    />

    <Slider 
      kind='range' 
      value={value3}  
      onChange={setValue3}
      label='Slider with Legend (symbol on the right)'
      hasLegendWith={['$', 'right']}
    />
  </>)
}

Result

Loading...

Min & Max

The slider can specify the maximum value allowed as well as the minimum value allowed by adding props max (default is 100) and min (default is 0) to the component.

Live Editor

function MySlider () { const [value, setValue] = useState([5, 50]); return <Slider kind='range' value={value} onChange={setValue} min={5} max={50} hasLegend /> }

function MySlider () {
  const [value, setValue] = useState([5, 50]);

  return <Slider 
    kind='range' 
    value={value} 
    onChange={setValue} 
    min={5}
    max={50}
    hasLegend
  />
}

Result

Loading...

Steps

The slider can have a predefined step interval (eg. a scale of 0 to 10) by adding prop step to the component, no floating numbers should be selectable.

Live Editor

function MySlider () { const [values, setValues] = useState([30, 90]); return <Slider kind='range' value={values} onChange={setValues} label='Slider Label' step={10} hasLegendWith={['$', 'right']} /> }

function MySlider () {
  const [values, setValues] = useState([30, 90]);

  return <Slider 
    kind='range' 
    value={values} 
    onChange={setValues} 
    label='Slider Label' 
    step={10} 
    hasLegendWith={['$', 'right']}
  />
}

Result

Loading...

Props

Name	Type	Default
value * The selected value(s)	number | [number, number]	—
onChange The onChange callback event	((value: number | [number, number]) => void)	—
kind The slider variants, default is single select	"single" | "range"	"single"
min The minimum value allowed	number	0
max The maximum value allowed	number	100
step The legal number intervals	number	—
label Allow to display the title of Slider	string	—
labelIconTooltip The tooltip of icon next to label	Omit<TooltipProps, "children">	—
disabled Allow to disable Slider	boolean	false
hasLegend Allow to display the legend with selected value(s)	boolean	false
hasLegendWith Allow to display the legend with the symbol on before or after, eg: $10, 20$	[string, "left" | "right"]	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

;