Components

Slider

Standalone slider component with single and range modes, orientation support, and configurable sizing.

Component

View code

Show playground

Props

Props	Default	Type
`modelValue`	`0`	`number \| [number, number]`
`type`	`SliderType.SINGLE`	`SliderType`
`color`	`ColorAccent.NEUTRAL`	`ColorAccent`
`size`	`SliderSize.MD`	`SliderSize`
`step`	`1`	`number`
`min`	`0`	`number`
`max`	`100`	`number`
`multiple`	`false`	`boolean`
`orientation`	`Orientation.HORIZONTAL`	`Orientation`
`hasTooltip`	`false`	`boolean`
`disabled`	`false`	`boolean`
`borderRadius`	—	`number`

Usage

modelValue

Sets the slider value.

 <template>
    <Slider v-model="value" />
</template>

<script setup lang="ts">
const value = ref(35)
</script>

Type: number | [number, number]
Default: 0

type

Sets slider mode. Use SINGLE for one thumb or RANGE for two thumbs.

 <template>
    <Slider :type="SliderType.RANGE" v-model="range" />
</template>

<script setup lang="ts">
const range = ref<[number, number]>([20, 80])
</script>

Type: SliderType
Default: SliderType.SINGLE

color

Sets slider accent color.

 <template>
    <Slider :color="ColorAccent.PRIMARY_BRAND" />
</template>

Type: ColorAccent
Default: ColorAccent.NEUTRAL

size

Sets track thickness and thumb size variant.

 <template>
    <Slider :size="SliderSize.LG" />
</template>

Type: SliderSize
Default: SliderSize.MD

step

Sets numeric increment.

 <template>
    <Slider :step="5" />
</template>

Important

Use a dividable step value that fits within the min-max range to ensure the slider functions correctly.

Type: number
Default: 1

min

Sets minimum allowed value.

 <template>
    <Slider :min="10" />
</template>

Type: number
Default: 0

max

Sets maximum allowed value.

 <template>
    <Slider :max="250" />
</template>

Type: number
Default: 100

multiple

Enables range behavior when used with array value.

 <template>
    <Slider multiple v-model="range" />
</template>

<script setup lang="ts">
const range = ref<[number, number]>([30, 60])
</script>

Type: boolean
Default: false

orientation

Sets horizontal or vertical layout.

 <template>
    <Slider :orientation="Orientation.VERTICAL" />
</template>

Type: Orientation
Default: Orientation.HORIZONTAL

hasTooltip

Shows current value tooltip over thumb(s).

 <template>
    <Slider hasTooltip />
</template>

Type: boolean
Default: false

disabled

Disables slider interaction.

 <template>
    <Slider disabled />
</template>

Type: boolean
Default: false

borderRadius

Overrides default rounded classes using a numeric radius in pixels.

 <template>
    <Slider :borderRadius="8" />
</template>

Type: number
Default: undefined