Slider

Range input slider with label, value display, and error states.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Slider.svelte

Usage

<script>
  import Slider from '$lib/components/Slider.svelte';

  let volume = $state(50);
  let brightness = $state(75);
  let price = $state(200);
</script>

<!-- Basic slider -->
<Slider bind:value={volume} label="Volume" />
<p class="text-neutral-400 text-sm">Volume: {volume}</p>

<!-- Slider with min/max/step -->
<Slider
  bind:value={brightness}
  label="Brightness"
  min={0}
  max={100}
  step={5}
/>

<!-- Slider with helper text -->
<Slider
  bind:value={price}
  label="Max Price"
  min={0}
  max={1000}
  step={10}
  helperText="Filter results by maximum price"
/>

<!-- Slider with error -->
<Slider
  bind:value={volume}
  label="Volume"
  error={volume > 80 ? 'Volume too high — may cause hearing damage' : ''}
/>

<!-- Disabled slider -->
<Slider value={42} label="Locked Value" disabled />

<!-- Slider without value display -->
<Slider bind:value={brightness} label="Opacity" showValue={false} />

Props

Prop	Type	Default	Description
value	number	50	Current slider value (bindable)
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment between values
label	string	''	Label text displayed above the slider
showValue	boolean	true	Whether to display the current value next to the label
disabled	boolean	false	Whether the slider is disabled
error	string	''	Error message to display below the slider
helperText	string	''	Helper text displayed below the slider when no error
id	string	''	Slider id attribute (auto-generated if not provided)
name	string	''	Slider name attribute for form submission
class	string	''	Additional CSS classes for the slider wrapper

Files

Slider.svelte