Slider

Live Editor

function SliderDemo() {
  return (
    <ThemeProvider>
      <Slider min={0} max={100} value={40} showValue label="Volume" onChange={(value) => console.log(value)} />
    </ThemeProvider>
  );
}

Result

Loading...

Props

value, valueStart, valueEnd, min, max, step, range, disabled, headless, orientation, size, variant, tone, showValue, format, label, description, marks, name, nameStart, nameEnd, onInput, onChange, onValueChange

Notes

• Use range, valueStart, and valueEnd for two-handle range selection.