Slider — React

---
import Slider from '../components/astro/Slider.astro';
---

<Slider min={0} max={100} value={50} ariaLabel="Volume" client:load />

<!-- Rizzo CSS. BEM: slider, slider__track, slider__fill; input type="range" inside. -->
<div class="slider">
  <div class="slider__track"><div class="slider__fill" style="width: 50%;"></div></div>
  <input type="range" min="0" max="100" value="50" aria-label="Value" />
</div>

<script>
  import { Slider } from '$lib/rizzo';
  let value = $state(50);
</script>

<Slider min={0} max={100} bind:value ariaLabel="Volume" />

<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"
/>