Slider

A value set by dragging a thumb between a minimum and maximum.

Code

<script lang="ts">
  import { Slider } from '@geoffcox/sterling-svelte';

  let value = $state(0);
</script>

<Slider bind:value />

Members

Property Name	Type	Default	Comment
disabled	boolean \| null \| undefined	false	When true, the slider is disabled.
max	number \| undefined	100	The maximum value of the slider.
min	number \| undefined	0	The minimum value of the slider.
step	number \| undefined	1	The amount the value changes by pressing arrow keys.
onChange	(value: number) => void	undefined	Called when the value of the slider changes.
precision	number \| undefined	undefined	The number of decimal places to round the value
value	number \| undefined	0	The current value of the slider.
vertical	boolean \| null \| undefined	false	When true, the slider is displayed vertically.

slider (<div>)
  container (<div>)
    track (<div>)
    fill (<div>)
    thumb (<div>)