Slider

A draggable <button> to choose a value between a minimum and maximum

Code

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

</script>

<Slider />

Members

Property Name	Type	Default	Comment
disabled	boolean	false	When true, the slider is disabled
max	number	100	The maximum value of the slider
min	number	0	The minimum value of the slider
step	number	1	The amount the value changes by pressing arrow keys
precision	number \| undefined	undefined	The number of decimal places to round the value
value	number	0	The current value of the slider
variant	string	''	Additional class names to apply
vertical	boolean	false	When true, the slider is displayed vertically

	Event Name	Data	Comment
	change	{ value: number }	Raised when the value of the slider changes

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