Slider

A slider is an input where the user selects a value from within a given range. The precise value, however, is not necessarily considered important.

React

released

Vue

released

Elements

unsupported

Android

unsupported

iOS

unsupported

Examples

Select brand:

FinnTori

Usage

Design Guidelines

See Figma: Warp - Components / Slider

Accessibility

To be accessible, an aria-label prop should be provided to the slider. If the slider is labeled by a separate element, use the labelledby prop with the id of the labeling element instead.

Events

The slider accepts an onChange prop which is triggered whenever the value is changed by the user. Note that this value updates as the user is dragging.

Questions?

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

Frameworks

Import

import { Slider } from '@warp-ds/react';

Examples

Enabled

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

  return (
    <div>
      <output>{value}</output>
      <Slider
        onChange={(value) => setValue(value)}
        value={value}
        min={1000}
        max={10_000_000}
        step={1000}
      />
    </div>
  );
}

Disabled

<div>
  <Slider aria-label="Disabled slider" value={50} disabled />
</div>

Props

Required props

name	type	default	notes
step	number		Specifies the value granularity
value	number		The current value

Optional Props

name	type	default	notes
max	number	100	The greatest value in the range of permitted values
min	number		The lowest value in the range of permitted values
disabled	boolean		Whether the slider is disabled
aria-label	number		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	when
onChange	(value: number) => void		Handler that is called when the value of the slider changes