Components / Forms

Slider

A styled native range input with optional visible value formatting.

Preview

Install

Run in your project

npx @getweini/cli@latest add slider

Use cases

Volume level

Choose a value in a familiar bounded 0–100 range.

Percentage setting

Show a formatted value while keeping the model numeric.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Slider from './components/ui/slider/Slider.vue'
const volume = ref(40)
</script>

<template>
  <Slider v-model="volume" :min="0" :max="100" show-value aria-label="Volume" />
</template>

More examples

Volume

The native range input supports keyboard adjustments.

Volume

<script setup lang="ts">
import { ref } from 'vue'
import Slider from './components/ui/slider/Slider.vue'
const volume = ref(40)
</script>
<template>
  <label for="volume">Volume</label>
  <Slider id="volume" v-model="volume" name="volume" :min="0" :max="100" show-value />
</template>

Percentage discount

valueLabel formats the visible and spoken value.

Percentage discount

<script setup lang="ts">
import { ref } from 'vue'
import Slider from './components/ui/slider/Slider.vue'
const discount = ref(10)
const percentage = (value: number) => value + '%'
</script>
<template>
  <label for="discount">Discount</label>
  <Slider id="discount" v-model="discount" :min="0" :max="50" :step="5" show-value :value-label="percentage" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Slider
Name	Type	Default or requirement
`v-model`	number	required
`min / max / step`	number	0 / 100 / 1
`disabled`	boolean	false
`size`	sm \| md \| lg	md
`showValue`	boolean	false
`valueLabel`	(value: number) => string	String

Native range keyboard, focus, form, and accessibility behavior is preserved. Supply an accessible name; valueLabel also provides aria-valuetext when formatted values need more context.

Implementation notes

Choose a step that matches the precision users actually need.
The rail fill follows the native range direction in RTL.

Accessibility and localization

Use a label or aria-label. valueLabel supplies aria-valuetext, so include units when the raw number is ambiguous.