Slider

onChange

({value}) => setValue(value)

({value}) => setValue(value)

onFinalChange

console.log

console.log

disabled

persistentThumb

valueToLabel

className

style

trackColors

thumbColors

import * as React from "react";
import { Slider } from "spaceweb/slider";

export default () => {
  const [value, setValue] = React.useState([25]);
  return (
    <Slider
      value={value}
      onChange={({ value }) => setValue(value)}
      onFinalChange={console.log}
    />
  );
}

import * as React from "react";
import { Slider } from "spaceweb/slider";

export default () => {
  const [value, setValue] = React.useState([25]);
  return (
    <Slider
      value={value}
      onChange={({ value }) => setValue(value)}
      onFinalChange={console.log}
    />
  );
}

Examples

Basic usage

Range Slider

Custom step, min and max

Marks at each step

Mark with labels

Mark with custom labels

Disabled

Stateful Slider (Uncontrolled)

Intents

Overrides usage

Custom Intent Color

Intent colors of Slider component can be changed by providing custom values to primaryIntentColor and secondaryIntentColor props

Multi Slider

trackColors array corresponds to track colors while thumbColors array corresponds to thumb colors.

For multi-slider (slider having more than 2 thumbs) , having value array length > 2 , you have to provide trackColors array having length value.length + 1 and thumbColors array having length value.length else it will throw error at runtime.

trackColors thumbColors values should be in hex-format ('#54BEEE') or css-variables ('var(--sw,'#54BEEE')) only.

trackColors thumbColors values does not have any impact if value array length<=2 .

intent props does not work with multi-slider as you have more freedom to control colors of track and thumb.

API

Slider props

Name	Type	Default	Description
className	string		Enriched style to be provided to Slider Root
disabled	boolean	false	slider will be disabled
getMarkLabel	function		Provide custom label for marks.
intent	'default' \| 'error' \| 'warning' \| 'success'	default	Intent of slider component
markLabel	boolean	false	Displays text label on each steps.
marks	boolean	false	Displays mark on each step.
max	number	100	Maximum value for range of slider.
min	number	0	Minimum value for range of slider.
onChange	function		called when value changes
onFinalChange	function		called when user is done with changing
overrides	custom		Lets you customize all aspects of the component.
persistentThumb	boolean	false	Causes the value/thumb to always display.
primaryIntentColor	string		custom primary intent color of the slider component
secondaryIntentColor	string		custom secondary intent color of the slider component
step	number	1	Step size
style	function		Passes style function, object or string to the Slider Root.
thumbColors	array		thumb colors for the multi-slider component
trackColors	array		track colors for the multi-slider component
value	array		Value for the slider component.
valueToLabel	function		Used to transform the thumb value/min/max labels into a user-friendly label.

You can check the implementation of the component for more details.

Slider exports

You can import this module like so:

import {Slider} from 'spaceweb/slider'

It exports the following components or utility functions:

Slider
StatefulSlider
StatefulSliderContainer

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components

📊
Charts