Range slider - Frameworks

Range sliders are best suited for cases where people need to quickly set a value within a designated range. They offer an intuitive way to adjust settings like volume, price filters, or relative distances.

See also Slider.

AndroidreleasedElementsreleasediOSreleasedReact 19released

React 19

AndroidElementsiOSReact 19

Import

You can import the component like so:

import { RangeSlider } from '@warp-ds/components/react/slider';

Examples

Enabled

export const RangedSimple = () => {
  const [value, setValue] = useState<[number, number]>([0, 100]);

  return (
    <div>
        <RangeSlider
          label="Pris"
          onChange={setValue}
          min={0}
          max={100}
          step={5}
          value={value}
          aria-label={['Fra kr', 'Til kr']}
          aria-valuetext={[`${value[0]} kr`, `${value[1]} kr`]}
        />
        <div className="w-slider__input">
          <TextField label="Min" value={value[0].toString()} onChange={(e) => setValue([+e.target.value, value[1]])} />
          <TextField label="Max" value={value[1].toString()} onChange={(e) => setValue([value[0], +e.target.value])} />
        </div>
    </div>
  );
};

Disabled

export const DisabledRanged = () => {
  const [value, setValue] = useState<[number, number]>([1000000, 10000000]);

  return (
    <div>
        <RangeSlider
          label="Pris"
          disabled
          onChange={setValue}
          min={1000000}
          max={10000000}
          step={50000}
          value={value}
        />
        <div className="w-slider__input">
          <TextField
            label="Min"
            disabled
            value={value[0].toString()}
            onChange={(e) => setValue([+e.target.value, value[1]])}
          />
          <TextField
            label="Max"
            disabled
            value={value[1].toString()}
            onChange={(e) => setValue([value[0], +e.target.value])}
          />
        </div>
    </div>
  );
};

Props

Required props

Name	Type	Default	Description
label	ReactNode		Label for the range slider
value	[number, number]		The current values

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]		String value for aria-label
aria-labelledby	[string, string]		Identifies the element that labels the slider
aria-valuetext	[string, string]		Human readable text alternative for the value

Events

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

Questions?

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