Slider

A slider input for selecting a value or range from a continuous or stepped interval. Supports single value, range, vertical orientation, marks, and tooltip display.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <div style={{ width: 400, padding: '20px 0' }}>
      <Slider
        min={0}
        max={100}
        defaultValue={70}
        step={1}
      />
    </div>
  );
}

Result

Loading...

Range Slider

Live Editor

function RangeSliderDemo() {
  return (
    <div style={{ width: 400, padding: '20px 0' }}>
      <h4>Basic Range</h4>
      <Slider range defaultValue={[20, 70]} min={0} max={100} />
      <br />
      <h4>Draggable Track</h4>
      <Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
    </div>
  );
}

Result

Loading...

With Marks

Live Editor

function MarksDemo() {
  return (
    <div style={{ width: 400, padding: '20px 0' }}>
      <Slider
        min={0}
        max={100}
        defaultValue={37}
        marks={{
          0: '0°C',
          25: '25°C',
          50: '50°C',
          75: '75°C',
          100: '100°C',
        }}
      />
    </div>
  );
}

Result

Loading...

Stepped and Dots

Live Editor

function SteppedDemo() {
  return (
    <div style={{ width: 400, padding: '20px 0' }}>
      <h4>Step = 10 with Dots</h4>
      <Slider min={0} max={100} defaultValue={30} step={10} dots />
      <br />
      <h4>Step = 25</h4>
      <Slider min={0} max={100} defaultValue={50} step={25} dots
        marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
    </div>
  );
}

Result

Loading...

Vertical Slider

Live Editor

function VerticalDemo() {
  return (
    <div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
      <Slider vertical defaultValue={30} />
      <Slider vertical range defaultValue={[20, 60]} />
      <Slider vertical defaultValue={50} dots step={10}
        marks={{ 0: '0', 50: '50', 100: '100' }} />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
min	number	0	Minimum value of the slider.
max	number	100	Maximum value of the slider.
defaultValue	number	70	Initial value of the slider.
step	number	1	Step increment between values. Use null for marks-only mode.
disabled	boolean	false	Whether the slider is disabled.
reverse	boolean	false	Whether to reverse the slider direction.
vertical	boolean	false	Whether to display the slider vertically.
keyboard	boolean	true	Whether keyboard arrow keys can control the slider.
dots	boolean	false	Whether to show dots at each step mark.
included	boolean	true	Whether to highlight the filled portion of the track.

Import

import Slider from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.