Tile UI Vue
Source code

Components

Slider

Slider control.

Use Slider to pick a value from a range.

Value:40

import { defineComponent, ref } from 'vue';
import { Slider, SliderTrack, SliderRange, SliderThumb } from '@tile-ui/vue';
 
export default defineComponent({
	name: 'SliderDemo',
	setup() {

Registry install

pnpm dlx shadcn@latest add @tile-ui/slider

Package usage

import { Slider } from '@tile-ui/vue';
 
<Slider defaultValue={[50]} max={100} step={1} />

Highlights

  • Min, max, and step
  • Horizontal and vertical
  • Track, range, and thumb

Registry dependencies

Item Purpose
slider Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Slider

Prop Type Default
orientation 'horizontal' | 'vertical' —
min number —
max number —
step number —
value number —
defaultValue number —
onValueChange (value: number) => void —
disabled boolean —
PreviousSkeletonNextSonner