NewsKit Mobile Logo

Slider

Overview

Usage

The Slider component renders a draggable "thumb" on a track, allowing the user to choose a numeric value between a predefined minimum and maximum. The slider supports multiple values, i.e. you can have multiple "thumbs" sliding on the same rail.

NewsKit also exports a StatefulSlider component which has the same props (except onChange becomes optional) and this handles the values updating via the onChange function for you.

Props

minnumber
The minimum value the slider can be set to, either at the left or the bottom of the slider depending on orientation.
maxnumber
The maximum value the slider can be set to, either at the right or the top of the slider depending on orientation.
valuesnumber[]
The values of the thumbs on the slider, i.e. their position. One thumb is rendered per value.
onChange(values: number[]) => void
The onChange function receives the new values of the thumbs whenever they are moved along the slider track. For the Slider, passing these values back into the values prop is essential to make the slider interactive. For the StatefulSlider, this is done for you and the onChange function is optional.
onFinalChange(values: number[]) => void
Similar to the onChange function, however this function is only called once the slider has stopped being dragged.
disabledboolean
If true, the slider is disabled and cannot be interacted with.
stepnumber = 1
The step is how much the slider increments or decrements the thumb value by as it is moved along the rail. The difference of max and min must be divisible by the step.
verticalboolean
If true, the slider is rendered vertically rather than horizontally. The slider will have a height of 100% in vertical mode. To ensure the slider renders as expected, your container must have a height set.
ariaLabelstring = slider
The aria-label attribute for the slider. It is recommended that you set this for screen readers to be able to explain the sliders purpose. If left undefined it is simply set to "slider".
minLabelstring | React.ComponentType
Either a string or a custom component can be passed in to be rendered to the left of the rail. Typically this would show the user the minimum value of the slider. If left undefined, no label is rendered.
maxLabelstring | React.ComponentType
Either a string or a custom component can be passed in to be rendered to the right of the rail. Typically this would show the user the maximum value of the slider. If left undefined, no label is rendered.
labelPositionLabelPosition = LabelPosition.Inline
Defines where the min/max labels will be placed accodringly to the slider track:

  • LabelPosition.Inline - places the slider between the min/max labels

  • LabelPosition.Before - places the min/max labels before the slider

  • LabelPosition.After - places the labels after the slider element.

This prop can be applied on both vertical and horizontal slider. For a visual example please check the playground.
thumbLabelboolean | React.ComponentType<ThumbLabelProps>
If true, a simple text thumb label is rendered above each thumb showing the value of that thumb. If a custom component is passed in, that component is rendered instead. Custom thumb labels receive a set of props including the values, index of the thumb, and whether the thumb is being dragged. It also receives the current thumb value as its children. If left undefined or set falsy, no thumb label is rendered.
thumbIconIconComponent
If provided places the passed icon inside the slider thumb.
renderTrack(params: { props, children, isDragged, disabled }) => React.ReactNode
If provided, this completely replaces the track rendering function passed to the underlying react-range module. The params object passed to the function include: props; apply these to your track component, children; this will contain the thumb and should be rendered inside your track, and isDragged and disabled booleans; these might affect how you wish to style your track.
renderThumb((params: { props, value, index, isDragged }) => React.ReactNode
If provided, this completely replaces the thumb rendering function passed to the underlying react-range module. The params object passed to the function include: props; apply these to your thumb component, value; this is the current thumb value, index; the index in the values array that corresponds to this thumb (this is useful if rendering more than one value), isDragged; this may affect how you wish to style your thumb.
overridesSliderOverrideProps
If provided, overrides the respective presets for the component and provided elements. Here are the overrides that the Slider accepts:
trackobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the slider track.
sizeMQ<string>
If provided, this overrides the size of the slider track.
indicatorobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the slider indicator. Only the background colour of this preset is used, other properties such as borders are ignored and will take the style of the style preset of the track.
thumbobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the slider thumb.
sizeMQ<string>
If provided, this overrides the size of the slider thumb.
thumbLabelobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the in-built slider thumb label. Custom thumb label component passed in to the slider will not have style preset applied out of the box.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the in-built slider thumb label.
spaceMQ<string>
If provided, this overrides the space between the thumb label baseline and the center of the slider thumb element.
labelsobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the in-built slider labels. This includes the min and max labels. Custom label components passed in to the slider will not have style preset applied out of the box.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the in-built min/max labels.
spaceMQ<string>
If provided, this overrides the space between the min/max labels and the slider track.

Refer to the defaults below for the full object structure:

{
  track: {
    stylePreset: "sliderTrack",
    size: "sizing030"
  },
  indicator: {
    stylePreset: "sliderIndicator"
  },
  thumb: {
    stylePreset: "sliderThumb",
    size: "sizing060"
  },
  thumbLabel: {
    stylePreset: "sliderThumbLabel",
    typographyPreset: "utilityLabel030",
    space: "space060"
  },
  labels: {
    stylePreset: "sliderLabels",
    typographyPreset: "utilityLabel020",
    space: "space030"
  }
}

Playground

Props
Values
Disabled
Min Label
Max Label
Label Position
Thumb Label
Vertical
import React from 'react';
import { StatefulSlider } from 'newskit';

export default () => (
  <StatefulSlider
    min={0}
    max={100}
    values={[50]}
    step={1}
    labelPosition="inline"
  />
);

For more information on overriding component defaults, see the docs here.