Slider - Frameworks

Sliders allow users to adjust a numeric value within a given range.

AndroidreleasediOSreleasedReactreleasedReact 19releasedVuereleased

React 19

AndroidiOSReactReact 19Vue

Import

You can import the component like so:

import { RegularSlider } from "@warp-ds/components/react/slider";

Examples

Enabled

export default function RegularSimple() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <RegularSlider
        label="Pris"
        onChange={(value) => setValue(value)}
        min={0}
        max={100}
        step={10}
        value={value}
        showMarks={true}
      />
      <div className="w-slider__input">
        <TextField
          label="value"
          value={value.toString()}
          onChange={(e) => setValue(+e.target.value)}
        />
      </div>
    </div>
  );
}

Disabled

export const DisabledRegular = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <RegularSlider
        label="Pris"
        disabled
        onChange={(value) => setValue(value)}
        min={0}
        max={100}
        step={10}
        value={value}
      />
      <div className="w-slider__input">
        <TextField
          label="value"
          disabled
          value={value.toString()}
          onChange={(e) => setValue(+e.target.value)}
        />
      </div>
    </div>
  );
};

Props

Required props

Name	Type	Default	Description
label	ReactNode		Label for the slider
value	number		The current value

Optional Props

Name	Type	Default	Description
max	number	100	The greatest value in the range of permitted values
min	number	0	The lowest value in the range of permitted values
step	number	1	Specifies the value granularity
showMarks	boolean	true	Whether to show marks on the slider
disabled	boolean	false	Whether the slider is disabled
className	string		Additional classes to include for the container
aria-label	string		String value for aria-label
aria-labelledby	string		Identifies the element that labels the slider
aria-valuetext	string		Human readable text alternative for the value

Events

Name	Description
onChange	(value: number) => void
onInput	(value: number) => void

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system