Slider
Accessible range input with visible track and fill. Props: min, max, step, value, disabled.
Add this component
The command below includes <strong>Slider</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Slider
bunx rizzo-css add Slider
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Slider from '../components/astro/Slider.astro';
---
<Slider ariaLabel="Volume" min={0} max={100} value={50} />
<!-- Rizzo CSS. Use BEM: slider, slider__track, slider__fill; input type="range" inside. -->
<div class="slider" data-slider>
<div class="slider__track">
<div class="slider__fill" style="--slider-fill: 50%;"></div>
<input type="range" min="0" max="100" value="50" aria-label="Volume" class="slider__input" />
</div>
</div>
<script>
import { Slider } from '$lib/rizzo';
</script>
<Slider ariaLabel="Volume" min={0} max={100} value={50} />
<script setup>
import { ref } from 'vue';
import Slider from '@/components/rizzo/Slider.vue';
</script>
<template>
<Slider
v-model:value="value"
:min="0"
:max="100"
aria-label="Volume"
/>
</template>
import { useState } from 'react';
import { Slider } from './components/react';
const [value, setValue] = useState(50);
<Slider
min={0}
max={100}
value={value}
onValueChange={setValue}
ariaLabel="Volume"
/>
Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun