RangeSlider

A range value set by dragging low and high thumbs between a minimum and maximum.

Code

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

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

<RangeSlider bind:lowValue bind:highValue/>

Members

Property Name	Type	Bindable	Default	Comment
disabled	boolean \| null \| undefined	no	false	When true, the slider is disabled.
highValue	number \| undefined	no	0	The high value of the range.
lowValue	number \| undefined	no	0	The low value of the range.
max	number \| undefined	no	100	The maximum value of the slider.
min	number \| undefined	no	0	The minimum value of the slider.
onChange	(value: { low?: number, high?: number}) => void	no	undefined	Called when the low or high values of the slider changes.
precision	number \| undefined	no	undefined	The number of decimal places to round the values.
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.
vertical	boolean \| null \| undefined	no	false	When true, the slider is displayed vertically.

Considerations

Includes HTMLDivElement props, events, and methods.
When a thumb is the equivalent of :active, the thumb element will have the 'active' class.
When a thumb is being dragged, the thumb element will have the 'dragging' class.
When a thumb can be moved by keyboard input, the thumb element will have the 'keyboard-focus' class.

Anatomy

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