Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Actions & Inputs

Slider

Sliders allow users to choose a value or values within a range.

Status

Supported

Introduced

v0.19.0

View codeView StorybookView Design

Interactive demo

This demo allows you to preview the slider component, its variations, and configuration options.

Values
Disabled
Min Label
Max Label
Label Position
Thumb Label
Vertical
1import React from 'react';
2import { Slider } from 'newskit';
3
4export default () => (
5  <Slider
6    min={0}
7    max={100}
8    values={[50]}
9    step={1}
10    labelPosition="inline"
11  />
12);
13

Anatomy

The slider component contains three required elements and three optional elements.

ItemNameDescriptionComponentOptional

Options

The slider has options for different use cases:

Orientation

The slider can be displayed horizontally or vertically.

Min and max

The min and max values of the slider can be customised. You can also add additional values to the slider.

Step distance

Slider step distance can be adjusted to increase or decrease the number of steps when the thumb is dragged along the track.

Min/max labels

Min/max labels can be added to the track.

Thumb label

A label can be added to the thumb, showing the current value.

Label position

  • Inline - Aligns the track labels inline.

  • Before - Labels appear above or to the left of the track, depending on the orientation.

  • After - Labels appear below or to the right of the track, depending on the orientation.

Thumb icon

An icon can be placed inside the thumb.

Track weight

The weight of the slider track can be customised to give more or less affordance.

Indicator weight

The weight of the slider indicator can be customised to give more or less affordance.

Feedback

The optional feedback element is non-interactive and appears behind the thumb control on hover.

Orientation

The slider can be displayed horizontally or vertically.

Min and max

The min and max values of the slider can be customised. You can also add additional values to the slider.

Step distance

Slider step distance can be adjusted to increase or decrease the number of steps when the thumb is dragged along the track.

Min/max labels

Min/max labels can be added to the track.

Thumb label

A label can be added to the thumb, showing the current value.

Label position

  • Inline - Aligns the track labels inline.

  • Before - Labels appear above or to the left of the track, depending on the orientation.

  • After - Labels appear below or to the right of the track, depending on the orientation.

Thumb icon

An icon can be placed inside the thumb.

Track weight

The weight of the slider track can be customised to give more or less affordance.

Indicator weight

The weight of the slider indicator can be customised to give more or less affordance.

Feedback

The optional feedback element is non-interactive and appears behind the thumb control on hover.

States

The slider has the following states:

Base

The default style before the user interacts with the slider.

Hover

The thumb control changes style to let the user know it’s interactive.

Active

The thumb control changes style to let users know they’ve interacted with it.

Focus

Communicates that a user has highlighted a thumb control item (e.g. via keyboard or voice).

Disabled

Communicates that a slider exists but isn’t available in that scenario. When the user hovers over a slider in a disabled state, the cursor shows as ‘not allowed’.

Behaviours

Here’s how the slider behaves:

Thumb control

A draggable ‘thumb’ control on the slider track allows users to choose a numeric value between a predefined minimum and maximum. The slider supports multiple values, i.e. you can have multiple ‘thumbs’.

Thumb control

A draggable ‘thumb’ control on the slider track allows users to choose a numeric value between a predefined minimum and maximum. The slider supports multiple values, i.e. you can have multiple ‘thumbs’.

Usage

Here’s how and when to use the slider:

Do use labels for context

Use labels to give more context to the values that the slider represents.

Do show values to provide context

Represent slider value units as it helps provide context e.g., ‘%' or 'px’.

Do prefix values

If the slider values range from negative to positive, prefix the value with a ‘+' plus or '-’ minus sign.

Accessibility considerations

Focus Order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser supplied

API

Slider

The slider has a range of props to define the experience in different use cases.

NameTypeDefaultDescriptionRequired

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?