Slider - Elements

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.

Accessibility

Usage

A slider consists of two custom elements that work together:

<w-slider> - A container that creates a <fieldset> and coordinates shared state and attributes.
<w-slider-thumb> - The <input type="range">, tooltip and text field for each slider in the range (from and to values).

Sliders come in two main variants:

Single slider with one thumb and one input field.
Range slider with two thumbs and input fields.

Examples

Single slider

html

<form id="audio">
  <w-slider label="Volume" min="0" max="100">
    <w-slider-thumb name="volume"></w-slider-thumb>
  </w-slider>
</form>

Range slider

html

<w-slider label="Range" min="0" max="100">
  <w-slider-thumb
    slot="from"
    aria-label="From value"
    name="from"
  ></w-slider-thumb>
  <w-slider-thumb slot="to" aria-label="To value" name="to"></w-slider-thumb>
</w-slider>

Open ended range slider

An open ended range slider covers a case where you want to offer a selection in a common range of values, but allow values outside of that range.

In the example below the case is production year. The edges of the open ended range slider are taken to mean "anything before 1950" and "anything after 2025". This is indicated by an empty string value ("").

Users can also choose to enter values into the input field that are outside the range of the slider, for example 1932 or 2027.

html

<form id="openended">
  <w-slider label="Production year" min="1950" max="2025" open-ended data-testid="open-ended">
    <w-slider-thumb slot="from" name="from-year"></w-slider-thumb>
    <w-slider-thumb slot="to" name="to-year"></w-slider-thumb>
  </w-slider>
</form>
<script>
  const openEndedSlider = document.querySelector('w-slider[data-testid="open-ended"]');
  openEndedSlider.labelFormatter = function (slot) {
    if (slot === "from") {
      return "Before 1950";
    }
    return "2025+";
  };
  
  openEndedSlider.valueFormatter = function (value, slot) {
    if (slot === "from" && value === "") {
      return "Min";
    }
    if (slot === "to" && value === "") {
      return "Max";
    }
    return value;
  };
</script>

Suffix in the input field

You can set a suffix on <w-slider> and have it apply to any input field in the component.

html

<w-slider
  label="Apartment size"
  min="0"
  max="250"
  suffix="sqm"
>
  <w-slider-thumb
    slot="from"
    aria-label="From size"
    name="from"
  ></w-slider-thumb>
  <w-slider-thumb
    slot="to"
    aria-label="To size"
    name="to"
  ></w-slider-thumb>
</w-slider>

Number formatter

If you need to format numbers, use the valueFormatter and labelFormatter properties.

html

<w-slider label="Price" min="0" max="250000" suffix="kr" data-testid="currency">
  <w-slider-thumb
    slot="from"
    aria-label="From price"
    name="from"
  ></w-slider-thumb>
  <w-slider-thumb slot="to" aria-label="To price" name="to"></w-slider-thumb>
</w-slider>
<script>
  const numberFormatter = new Intl.NumberFormat("en", {
    maximumFractionDigits: 0,
  }).format;
  const currencySlider = document.querySelector('w-slider[data-testid="currency"]');
  currencySlider.valueFormatter = numberFormatter;
  currencySlider.labelFormatter = (slot) => {
    if (slot === "from") return "0";
    return numberFormatter("250000");
  };
</script>

Steps

Sets the step HTML attribute on the inputs.

html

<w-slider label="Single" step="5" min="0" max="100">
  <w-slider-thumb name="value"></w-slider-thumb>
</w-slider>

Marks

Show tick markers along the slider. Only works with a single slider.

html

<w-slider label="Single" min="0" max="100" step="5" markers="5">
  <w-slider-thumb name="value"></w-slider-thumb>
</w-slider>

With help text

html

<w-slider
  label="Model year"
  min="1950"
  max="2025"
  help-text="Model year of the car"
>
  <w-slider-thumb slot="from" name="from"></w-slider-thumb>
  <w-slider-thumb slot="to" name="to"></w-slider-thumb>
</w-slider>

With validation error

html

<w-slider
  label="Model year"
  min="1950"
  max="2025"
  error="Something is wrong and this should help you solve the problem"
  invalid
>
  <w-slider-thumb slot="from" name="from"></w-slider-thumb>
  <w-slider-thumb slot="to" name="to"></w-slider-thumb>
</w-slider>

html

<w-slider min="1950" max="2025" help-text="Model year of the car">
  <legend class="sr-only" slot="label">Model year</legend>
  <w-slider-thumb slot="from" name="from"></w-slider-thumb>
  <w-slider-thumb slot="to" name="to"></w-slider-thumb>
</w-slider>

Hidden min and max value labels

Give the component a label formatter and always return the empty string.

html

<w-slider min="1950" max="2025" help-text="Model year of the car" data-testid="hidden-minmax-label">
  <legend class="sr-only" slot="label">Model year</legend>
  <w-slider-thumb slot="from" name="from"></w-slider-thumb>
  <w-slider-thumb slot="to" name="to"></w-slider-thumb>
</w-slider>
<script>
  const hiddenMinMaxSlider = document.querySelector('w-slider[data-testid="hidden-minmax-label"]');
  hiddenMinMaxSlider.labelFormatter = () => "";
</script>

Visually hiden text field

The text field doubles as a visualization of the exact value, which is difficult to see on a slider. If you visually hide the text field with the hidden-textfield attribute always make sure to show the value some place, unless the exact value is irrellevant.

html

<output class="text-xs">
  <span class="font-bold">Distance:</span>
  <span data-testid="distance-value"></span>
</output>
<form name="map">
  <w-slider min="0" max="20" hidden-textfield data-testid="map-radius">
    <legend class="sr-only" slot="label">Location filter radius</legend>
    <w-slider-thumb name="distance"></w-slider-thumb>
  </w-slider>
</form>
<script>
  const mapRadiusSlider = document.querySelector('w-slider[data-testid="map-radius"]');

  const radiusSteps = [
    200, 300, 400, 500, 700, 1000, 1500, 2000, 3000, 5000, 7000, 10000, 20000,
    30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000,
  ];
  const formatter = new Intl.NumberFormat("en", { maximumFractionDigits: 0 });
  
  const formatDistance = (value) => {
    const index = Number.parseInt(value);
    const numValue = radiusSteps[index];

    let formattedValue = "";

    if (numValue < 1000) {
      formattedValue = formatter.format(numValue) + " m";
    } else {
      formattedValue = formatter.format(numValue / 1000) + " km";
    }
    return formattedValue;
  };
  
  mapRadiusSlider.labelFormatter = (slot) => {
    if (slot === "from") {
      return formatDistance("0");
    }
    return formatDistance(String(radiusSteps.length - 1));
  };
  
  mapRadiusSlider.valueFormatter = (value) => {
    const formattedValue = formatDistance(value);
    document.querySelector('[data-testid="distance-value"]').innerText = formattedValue;
    return formattedValue;
  };
</script>

Styling API

`<w-slider>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties

Name	Type	Default	Summary
disabled	`boolean`	`false`	-
error	`string`	`-`	Validation error text, if any
help-text	`string`	`-`	Additional description to show below the fieldset
hidden-textfield	`boolean`	`false`	Should only be used in special cases
invalid	`boolean`	`false`	Sets the form fields and fieldset in an invalid state
label	`string`	`-`	The slider fieldset label. Required for proper accessibility.
labelFormatter (JS only)	`(slot: SliderSlot) => string`	`-`	Formatter for the min and max labels below the range.
markers	`number`	`-`	Pass a value similar to step to create visual markers at that interval
max	`string`	`100`	The maximum allowed value in the range inputs
min	`string`	`0`	The minimum allowed value in the range inputs
open-ended	`boolean`	`false`	Whether or not to allow values outside the range such as "Before 1950" and "2025+".
required	`boolean`	`false`	Ensures a child slider thumb has a value before allowing the containing form to submit
step	`number`	`-`	ets step on the range input to jump between values when dragging
suffix	`string`	`-`	Suffix used in text input fields and for the min and max values of the slider
tooltipFormatter (JS only)	`(value: string, slot: SliderSlot) => string`	`-`	Overrides valueFormatter for the tooltip.
valueFormatter (JS only)	`(value: string, slot: SliderSlot) => string`	`-`	Formatter for the tooltip and input mask values

Property Details

disabled

Type: boolean
Default: false

error

Validation error text, if any

Type: string
Default: -

help-text

Additional description to show below the fieldset

Type: string
Default: -

hidden-textfield

Should only be used in special cases

Type: boolean
Default: false

invalid

Sets the form fields and fieldset in an invalid state

Type: boolean
Default: false

label

The slider fieldset label. Required for proper accessibility.

If you need to display HTML, use the label slot instead (f. ex. <legend class="sr-only" slot="label">Production year</legend>)

Type: string
Default: -

labelFormatter (JS only)

Formatter for the min and max labels below the range.

Type: (slot: SliderSlot) => string
Default: -

markers

Pass a value similar to step to create visual markers at that interval

Type: number
Default: -

max

The maximum allowed value in the range inputs

Type: string
Default: 100

min

The minimum allowed value in the range inputs

Type: string
Default: 0

open-ended

Whether or not to allow values outside the range such as "Before 1950" and "2025+".

Type: boolean
Default: false

required

Ensures a child slider thumb has a value before allowing the containing form to submit

Type: boolean
Default: false

step

ets step on the range input to jump between values when dragging

Type: number
Default: -

suffix

Suffix used in text input fields and for the min and max values of the slider

Type: string
Default: -

tooltipFormatter (JS only)

Overrides valueFormatter for the tooltip.

Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.

Type: (value: string, slot: SliderSlot) => string
Default: -

valueFormatter (JS only)

Formatter for the tooltip and input mask values

Type: (value: string, slot: SliderSlot) => string
Default: -

`<w-slider-thumb>` API

Properties

Name	Type	Default	Summary
aria-description	`string`	`-`	Contextual information for assistive technology, should it be needed
aria-label	`string`	label` from `w-slider	Label for the range input.
name	`string`	`-`	The name of this input field in the form. The canonical source of the value is the text field.
placeholder	`string`	`-`	Placeholder in empty text fields
value	`string`	`-`	The initial value, if any

Property Details

aria-description

Contextual information for assistive technology, should it be needed

Type: string
Default: -

aria-label

Label for the range input.

Type: string
Default: label` from `w-slider

name

The name of this input field in the form. The canonical source of the value is the text field.

Type: string
Default: -

placeholder

Placeholder in empty text fields

Type: string
Default: -

value

The initial value, if any

Type: string
Default: -

Events

slidervalidity

Internal event used by (and stopped by) w-slider.

Type: CustomEvent

thumbreset

Internal event used by (and stopped by) w-slider.

Type: CustomEvent

Questions?

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

Slider - Elements ​

Accessibility ​

Usage ​

Examples ​

Single slider ​

Range slider ​

Open ended range slider ​

Suffix in the input field ​

Number formatter ​

Steps ​

Marks ​

With help text ​

With validation error ​

Visually hidden labels ​

Hidden min and max value labels ​

Visually hiden text field ​

Styling API ​

<w-slider> API ​

Properties ​

Property Details ​

disabled ​

error ​

help-text ​

hidden-textfield ​

invalid ​

label ​

labelFormatter (JS only) ​

markers ​

max ​

min ​

open-ended ​

required ​

step ​

suffix ​

tooltipFormatter (JS only) ​

valueFormatter (JS only) ​

<w-slider-thumb> API ​

Properties ​

Property Details ​

aria-description ​

aria-label ​

name ​

placeholder ​

value ​

Events ​

slidervalidity ​

thumbreset ​

Questions? ​

Slider - Elements

Accessibility

Usage

Examples

Single slider

Range slider

Open ended range slider

Suffix in the input field

Number formatter

Steps

Marks

With help text

With validation error

Visually hidden labels

Hidden min and max value labels

Visually hiden text field

Styling API

`<w-slider>` API

Properties

Property Details

disabled

error

help-text

hidden-textfield

invalid

label

labelFormatter (JS only)

markers

max

min

open-ended

required

step

suffix

tooltipFormatter (JS only)

valueFormatter (JS only)

`<w-slider-thumb>` API

Properties

Property Details

aria-description

aria-label

name

placeholder

value

Events

slidervalidity

thumbreset

Questions?