Slider

Uncontrolled

Result

Loading...

Live Editor

<Slider min={0} max={50} value={25} />

<Slider min={0} max={50} value={25} />

Controlled

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState(25); return <Slider label="Slider" max={50} min={0} onChange={setValue} value={value} />; }

function Example() {
    const [value, setValue] = React.useState(25);

    return <Slider label="Slider" max={50} min={0} onChange={setValue} value={value} />;
}

Negative min, positive max

Result

Loading...

Live Editor

<Slider min={-10} max={10} step={2} value={0} />

<Slider min={-10} max={10} step={2} value={0} />

Analytics

The Slider component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Slider',
	actions: {
		onChange: { type: 'SLIDER_CHANGE', payload: 'Change' },
	},
};

Props