Skip to main content

Slider

Slider

Range slider for selecting numeric values

Tags: component form input

View Demo

Slider allows users to select a value or range from a continuous or discrete scale.

Import​

<script>
  import { Slider } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let value = $state([50]);
</script>

<Slider bind:value />

Props​

Prop Type Default Description
value number[] [50] Current value(s) (bindable)
min number 0 Minimum value
max number 100 Maximum value
step number 1 Step increment
disabled boolean false Disables the slider
orientation 'horizontal' | 'vertical' 'horizontal' Slider direction
size 'sm' | 'md' | 'lg' 'md' Size variant
label string - Label text
hint string - Hint text below the slider
error string - Error message
showValue boolean false Shows current value
formatValue (value: number) => string - Value formatter
class string - Additional CSS classes
onValueChange (value: number[]) => void - Callback during drag
onValueCommit (value: number[]) => void - Callback when drag ends

With Label and Hint​

<Slider label="Volume" hint="Adjust the audio volume" bind:value showValue />

Show Value​

Display the current value:

<Slider label="Brightness" bind:value showValue />

Custom Range​

Set minimum and maximum values:

<Slider min={0} max={1000} bind:value label="Price" showValue />

Step Increment​

Control the step size:

<Slider min={0} max={100} step={10} bind:value label="Percentage" showValue />

Value Formatting​

Format the displayed value:

<Slider label="Price" min={0} max={1000} bind:value showValue formatValue={(v) => `$${v}`} />

Validation​

Show validation errors:

<Slider
  label="Budget"
  bind:value
  min={100}
  max={10000}
  showValue
  formatValue={(v) => `$${v}`}
  error={value[0] < 500 ? 'Minimum budget is $500' : ''}
/>

Sizes​

<Slider size="sm" bind:value />
<Slider size="md" bind:value />
<Slider size="lg" bind:value />
Size Track Height Thumb Size
sm 6px 16px
md 8px 20px
lg 12px 24px

Range Slider​

Select a range with two thumbs:

<script>
  let range = $state([25, 75]);
</script>

<Slider
  label="Price Range"
  hint="Select minimum and maximum price"
  bind:value={range}
  showValue
  formatValue={(v) => `$${v}`}
/>

Accessibility​

The Slider component includes:

  • Keyboard navigation (Arrow keys)
  • Proper ARIA attributes
  • Focus indicators
  • Touch-friendly thumb size
  • aria-describedby connects hint and error messages

:::note Keyboard Navigation

  • Arrow Left/Down: Decrease value
  • Arrow Right/Up: Increase value
  • Home: Set to minimum
  • End: Set to maximum
  • Page Up/Down: Larger increments :::

Examples​

Volume Control​

<script>
  let volume = $state([70]);
</script>

<Slider
  label="Volume"
  hint="Adjust speaker volume"
  bind:value={volume}
  min={0}
  max={100}
  showValue
  formatValue={(v) => `${v}%`}
/>

Price Filter​

<script>
  let priceRange = $state([0, 500]);
</script>

<Slider
  label="Price Range"
  hint="Filter products by price"
  bind:value={priceRange}
  min={0}
  max={1000}
  step={10}
  showValue
  formatValue={(v) => `$${v}`}
/>

Temperature​

<script>
  let temp = $state([72]);
</script>

<Slider
  label="Temperature"
  hint="Set thermostat temperature"
  bind:value={temp}
  min={60}
  max={85}
  showValue
  formatValue={(v) => `${v}°F`}
/>

Opacity Control​

<script>
  let opacity = $state([100]);
</script>

<Slider
  label="Opacity"
  bind:value={opacity}
  min={0}
  max={100}
  showValue
  formatValue={(v) => `${v}%`}
  onValueChange={(val) => {
    element.style.opacity = val[0] / 100;
  }}
/>

Discrete Steps​

<script>
  let rating = $state([3]);
  const labels = ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];
</script>

<Slider
  label="Rating"
  hint="Rate your experience"
  bind:value={rating}
  min={1}
  max={5}
  step={1}
  showValue
  formatValue={(v) => labels[v - 1]}
/>

Commit on Release​

Trigger action only when user finishes dragging:

<Slider
  bind:value
  onValueCommit={(val) => {
    savePreference(val[0]);
  }}
/>
On this page