Slider | Zalify UI

React

Usage

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

<Slider.Root>
  <Slider.Label />
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.DraggingIndicator />
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.MarkerGroup>
      <Slider.Marker />
    </Slider.MarkerGroup>
  </Slider.Control>
</Slider.Root>

Props

Root

Prop	Default	Type
`size`	`'md'`	`'sm' \| 'md' \| 'lg'`
`variant`	`'outline'`	`'outline'`
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the slider
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`
`origin`	`\start\`	`'center' \| 'start' \| 'end'` The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`\contain\`	`'center' \| 'contain'` The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
`aria-label`		`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`		`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`number[]` The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
`disabled`		`boolean` Whether the slider is disabled
`form`		`string` The associate form of the underlying input element.
`getAriaValueText`		`(details: ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string thumb: (index: number) => string hiddenInput: (index: number) => string control: string track: string range: string label: string valueText: string marker: (index: number) => string }>` The ids of the elements in the slider. Useful for composition.
`invalid`		`boolean` Whether the slider is invalid
`name`		`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`		`(details: FocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`		`(details: ValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Function invoked when the slider value change is done
`readOnly`		`boolean` Whether the slider is read-only
`thumbSize`		`{ width: number; height: number }` The slider thumbs dimensions
`value`		`number[]` The controlled value of the slider

Marker

Prop	Default	Type
`value`*		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

Prop	Default	Type
`index`*		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`name`		`string`