Slider

The Slider is used to allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Import#

import {
  CSlider,
  CSliderTrack,
  CSliderFilledTrack,
  CSliderThumb
} from '@chakra-ui/vue'

Usage#

Editable Example

<c-slider default-value="56">
  <c-slider-track />
  <c-slider-filled-track />
  <c-slider-thumb />
</c-slider>

Changing the slider color#

Editable Example

<c-slider color="pink" default-value="24">
  <c-slider-track />
  <c-slider-filled-track />
  <c-slider-thumb />
</c-slider>

Props#

Slider Props#

The Slider component wraps all it's children in the Box component, so you can pass all Box props to change it's style.

Name	Type	Description
`value`	`number`	The value of the slider.
`defaultValue`	`number`	The initial value of the slider.
`max`	`number`	Standard `input` max attribute.
`min`	`number`	Standard `input` min attribute.
`step`	`number`	Standard `input` step attribute.
`aria-label`	`string`	The accessible label.
`aria-labelledby`	`string`	The `id` of the element that labels the sliders
`aria-valuetext`	`string`	The aria-valuetext of the switch for accessibility.
`orientation`	`string`	The orientation of the slider, only `horizontal` is supported for now.
`getAriaValueText`	`(value: number ): string`	The callback to format the `aria-valuetext`.
`size`	`sm`, `md`, `lg`	The size of the slider.
`color`	`string`	The color scheme to use for the slider. Use a color key in `theme.colors`
`name`	`string`	The name of the slider component when used in a form.
`id`	`string`	The id of the slider component when used in a form.

Slider Events#

Name	Description
`change`	Callback fired when the value of the slider changes.
`onFocus`	Callback fired when the thumb receives focus
`blur`	Callback fired when the thumb is blurred
`mouseDown`	Callback fired when the you mousedown on any part of the slider
`keyDown`	Callback fired when the you keydown on any part of the slider

Slots#

Name	Description
default	Slot for the children of the slider.

SliderThumb Props#

SliderThumb composes PseudoBox so you can pass all PseudoBox props to change it's style.

SliderFilledTrack Props#

SliderFilledTrack composes PseudoBox so you can pass all PseudoBox props to change it's style.

SliderTrack Props#

SliderTrack composes Box so you can pass all Box props to change it's style.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!