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	Bindable	Default	Comment
disabled	boolean \| null \| undefined	no	false	When true, the slider is disabled.
max	number \| undefined	no	100	The maximum value of the slider.
min	number \| undefined	no	0	The minimum value of the slider.
onChange	(value: number) => void	no	undefined	Called when the value of the slider changes.
precision	number \| undefined	no	undefined	The number of decimal places to round the value.
reverse	boolean \| null \| undefined	no	false	When true, the slider direction from min to max is reversed.
step	number \| undefined	no	1	The amount the value changes by pressing arrow keys.
value	number \| undefined	no	0	The current value of the slider.
vertical	boolean \| null \| undefined	no	false	When true, the slider is displayed vertically.

Considerations

Includes HTMLDivElement props, events, and methods.

Anatomy

<div class="sterling-slider>
  <div class="container">
    <div class="track"></div>
    <div class="fill"></div>
    <div class="thumb"></div>
  </div>
</div>