Slider ​

A slider input for selecting a single value or a range of values within a minimum and maximum.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from 'frappe-ui'

const value = ref([25])
</script>

<template>
  <div class="w-full max-w-md">
    <Slider v-model="value" />
  </div>
</template>

Sizes ​

Range ​

Use a two-element modelValue to render two thumbs.

20 – 80

Labeling ​

Adjust the volume.

value-commit ​

value-commit fires once when the user finishes dragging the slider — useful for triggering side effects only at drag end, not on every step.

Commits: —

States ​

API Reference ​

Show types
typescript
import type { ToggleSize } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

/**
 * Value model for the Slider component.
 * Use one number for a single-value slider or two numbers for a range slider.
 *
 * @example
 * const single: SliderValue = [25]
 *
 * @example
 * const range: SliderValue = [20, 80]
 */
export type SliderValue = number[]

export interface SliderProps extends InputLabelingProps {
  /** Step interval between slider values. */
  step?: number

  /** Maximum allowed slider value. */
  max?: number

  /** Minimum allowed slider value. */
  min?: number

  /** Visual size of the slider. */
  size?: ToggleSize

  /** Disables the slider. */
  disabled?: boolean
}

export interface SliderEmits {
  /** Fired once when the user finishes dragging the slider. */
  'value-commit': [value: SliderValue]
}
Prop Default Type
step
1
number

Step interval between slider values.

max
100
number

Maximum allowed slider value.

min
0
number

Minimum allowed slider value.

size
"sm"
ToggleSize

Visual size of the slider.

disabled
false
boolean

Disables the slider.

label
—
string

Label rendered above (or beside, for binary controls) the input.

description
—
string

Helper text rendered below the input. Hidden when `error` is set.

error
—
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
—
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
—
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

modelValue
—
SliderValue

The current slider value (controlled).

Slot Payload
label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
[value: SliderValue | undefined]

Fired when the model value changes.

value-commit
[value: SliderValue]

Fired once when the user finishes committing the value.

SidebarSwitch