Slider

An input where the user selects a value from within a given range.

Anatomy

import { Slider } from '@streamelements/frontend-ui';

<Slider.Root max={4}>
  <Slider.Track>
    <Slider.NumericSegments />
    <Slider.Range />
  </Slider.Track>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
  </Slider.ThumbsContainer>
  <Slider.ValueSegments />
</Slider.Root>

Basic example

Idle 0/4

0

Hover 0/4

0

Focus 1/4

1

Idle 3/4

3

Disabled 3/4

3

import { Slider } from '@streamelements/frontend-ui';

...

<Slider.Root max={4}>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
  </Slider.ThumbsContainer>
</Slider.Root>

Segmented numeric

This component adds a dot on each step of the component.

Idle 0/4

0

Hover 0/4

0

Focus 1/4

1

Idle 3/4

3

Disabled 3/4

3

import { Slider } from '@streamelements/frontend-ui';

<Slider.Root max={[4]}>
  <Slider.Track>
    <Slider.NumericSegments />
    <Slider.Range />
  </Slider.Track>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
  </Slider.ThumbsContainer>
  <Slider.ValueSegments />
</Slider.Root>

Segmented values

This component adds a label underneath every step of the component. If you don't pass labels prop to it, the index of each step will be shown.

Idle 0/4

0ValueValueValueValueValue

Hover 0/4

0ValueValueValueValueValue

Focus 1/4

1ValueValueValueValueValue

Idle 3/4

3ValueValueValueValueValue

Disabled 3/4

3ValueValueValueValueValue

Segment type

1000100020003000

import { Slider } from '@streamelements/frontend-ui';

<Slider.Root max={[4]}>
  <Slider.Track>
    <Slider.NumericSegments />
    <Slider.Range />
  </Slider.Track>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
  </Slider.ThumbsContainer>
  <Slider.ValueSegments />
</Slider.Root>

API

Root

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
defaultValue	number[]	–	The initial value of the component. Use when you do not need to control the state of the Slider.
value	number[]	–	The controlled value of the slider. Must be used in conjunction with onValueChange
name	string	–	The name of the switch. Submitted with its parent form.
disabled	boolean	–	When true, prevents user interaction with the component.
orientation	string	horizontal	Not implemented
dir	string	ltr	Not implemented
min	number	0	The minimum value for the range
max	number	100	The maximum value for the range
step	number	1	The step interval
onValueChange	Function	–	Event handler when the value changes.
minStepsBetweenThumbs	number	0	The minimum permitted steps between multiple thumbs

ThumbsContainer

Contains the thumbs.

Thumb

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
label	string	–	Custom text to display on the tooltip of the Thumb
inputProps	React.HTMLProps<HTMLInputElement>	–	Props for the input representation of the thumb

NumericSegments

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
variant	dot | dash | Function	dot	Defines the way each step of the slider will look. An option to pass in a function (index: number) => Type, to define different look per index

ValueSegments

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
labels	string[]	Array((max / step) + 1) - min)	The text value for the label of each step

Examples

Multi-thumb

Providing multiple entries in defaultValue or value, renders the same amount of thumbs to control the values.

24

<Slider.Root min={1} defaultValue={[2, 4]} max={5}>
  <Slider.Track>
    <Slider.Range/>
  </Slider.Track>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
    <Slider.Thumb />
  </Slider.ThumbsContainer>
  <Slider.NumericSegments />
</Slider.Root>

Prevent thumb overlap

Setting minStepsBetweenThumbs to 1 prevents the thumbs from overlapping.

24

<Slider.Root min={1} defaultValue={[2, 4]} max={5} minStepsBetweenThumbs={1}>
  <Slider.Track>
    <Slider.Range/>
  </Slider.Track>
  <Slider.ThumbsContainer>
    <Slider.Thumb />
    <Slider.Thumb />
  </Slider.ThumbsContainer>
  <Slider.NumericSegments />
</Slider.Root>