Slider

Customizable slider component.

Source Style

React

Loading...

• index.tsx
• Slider.module.css

function App() {
  const [value, setValue] = useState(64)

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 8,
      }}
    >
      <Slider.Root
        className={sliderTheme.root}
        value={value}
        min={0}
        max={100}
        onChange={(v) => setValue(v)}
      >
        <Slider.Track className={sliderTheme.track}>
          <Slider.Thumb className={sliderTheme.thumb} aria-label="Level" />
        </Slider.Track>
      </Slider.Root>
      <span
        style={{
          width: '2rem',
        }}
      >
        {value}
      </span>
    </div>
  )
}

Svelte

App.svelte

<script lang="ts">
  import { Slider } from '@tremolo-ui/svelte'

  // Copy this file from the Styling page into your own project.
  import sliderTheme from './Slider.module.css'

  let value = $state(64)
</script>

<Slider.Root class={sliderTheme.root} bind:value min={0} max={100}>
  <Slider.Track class={sliderTheme.track}>
    <Slider.Thumb class={sliderTheme.thumb} aria-label="Level" />
  </Slider.Track>
</Slider.Root>
<span>{value}</span>

Vue

App.vue

<script setup lang="ts">
import { ref } from 'vue'

import { Slider, SliderThumb, SliderTrack } from '@tremolo-ui/vue'

// Copy this file from the Styling page into your own project.
import sliderTheme from './Slider.module.css'

const value = ref(64)
</script>

<template>
  <Slider v-model="value" :class="sliderTheme.root" :min="0" :max="100">
    <SliderTrack :class="sliderTheme.track">
      <SliderThumb :class="sliderTheme.thumb" aria-label="Level" />
    </SliderTrack>
  </Slider>
  <span>{{ value }}</span>
</template>

Import

React

import { Slider } from '@tremolo-ui/react'

Svelte

import { Slider } from '@tremolo-ui/svelte'

Vue

import {
  Slider,
  SliderMarks,
  SliderMarksOption,
  SliderThumb,
  SliderTrack,
} from '@tremolo-ui/vue'

API Reference

Each part lists the props of its own. It also takes the attributes of the element it renders, such as className and style.

In Svelte and Vue the props are the same, written their way — class rather than className, bind:value or v-model, snippets or slots for content. See Svelte and Vue.

State is on the element as a data attribute, so it is a selector away — see Styling. An attribute is only there while its state is on.

Root

Holds the value and the settings, and passes them to the parts inside.

Prop	Type	Default
value*	number	—
min*	number	—
max*	number	—
step	number	1
scale	Scale	linearScale
orientation	"horizontal" | "vertical"	'horizontal'
reverse	boolean	false
dragCursor	Cursor	'pointer'
wheel	ModifierValue<InputEventOption> | null	['raw', 1]
dragSensitivity	ModifierValue<number>	{ default: 1, shift: 0.1 }
keyboard	ModifierValue<InputEventOption> | null	{ default: ['raw', 1], shift: ['raw', 0.1] }
disabled	boolean	—
readOnly	boolean	—
onChange	(value: number) => void	—
onChangeStart	(value: number, source: ChangeSource) => void	—
onChangeEnd	(value: number, source: ChangeSource) => void	—
changeEndDelay	number	500
children*	ReactNode	—
actionsRef	Ref<SliderMethods>	—

Full reference: SliderProps

Data attribute	Values
[data-orientation]	"horizontal" | "vertical"
[data-disabled]	Present when disabled is set
[data-readonly]	Present when readonly is set

Track

The bar the value runs along. It sets --percent to where the value is, so the theme can fill the part below it. Slider.Thumb goes inside it.

Prop	Type	Default
length	string | number	—
thickness	string | number	—
activeColor	string	—
inactiveColor	string	—

Full reference: SliderTrackProps

Custom property	Written by	What it sets
--length	length	How long the track is along the axis the slider runs.
--thickness	thickness	How thick the track is across that axis.
--active-color	activeColor	Colour of the part from min to the value.
--inactive-color	inactiveColor	Colour of the rest of the track.
--percent	the component	Where the value sits, as a percentage.

--percent is the one number CSS cannot work out on its own, and it is why the track draws nothing of its own: the fill is a rule in the theme rather than something the package paints for you.

.track {
  background: linear-gradient(
    var(--axis),
    var(--active-color) var(--percent),
    var(--inactive-color) var(--percent)
  );
}

Replace that rule and the track can be anything — a second colour stop, an image, a dotted scale that fills in.

Data attribute	Values
[data-orientation]	"horizontal" | "vertical"
[data-disabled]	Present when disabled is set
[data-flipped]	Present when the value grows from the far end: vertical or reverse, but not both

Thumb

The handle. A visually hidden range input inside it takes the focus and carries the ARIA.

Its children are drawn inside it. The thumb is one element either way, so what is passed there is decoration on top of it rather than a replacement for it — className and style are how its own appearance is changed.

Prop	Type	Default
color	string	—
actionsRef	Ref<SliderThumbMethods>	—

Full reference: SliderThumbProps

Custom property	Written by	What it sets
--color	color	Colour of the thumb.

Data attribute	Values
[data-disabled]	Present when disabled is set
[data-readonly]	Present when readonly is set

Marks

A row of marks along the track, built from options or from Slider.MarksOption children, one per mark. The children are ignored while options is set.

Prop	Type	Default
gap	string | number	—
options	MarksOptions	—

Full reference: SliderMarksProps

Custom property	Written by	What it sets
--gap	gap	Space between the marks and the track.

Data attribute	Values
[data-orientation]	"horizontal" | "vertical"

MarksOption

One mark and its label, placed at value.

Prop	Type	Default
value*	number	—
mark	boolean	true
label	string | number | null	—
thickness	string | number	—
length	string | number	—
gap	string | number	—
classes	{ mark?: string; label?: string }	—
styles	{ mark?: CSSProperties; label?: CSSProperties }	—

Full reference: SliderMarksOptionProps

Custom property	Written by	What it sets
--thickness	thickness	Thickness of the mark.
--length	length	Length of the mark.
--gap	gap	Space between the mark and the label.

Set the label's width through styles.label or its class in classes.label.

Data attribute	Values
[data-orientation]	"horizontal" | "vertical"

The mark inside the option carries [data-orientation] too.