Smelte logo
SMELTE
Github Smelte

Sliders

Basic
Value: 0
With color prop
Value: 0
With steps
Value: 0
<script>
  import { Slider, Checkbox } from "smelte";

  let value = 0;
  let value2 = 0;
  let disabled = false;
</script>

<div class="my-4">
  <Checkbox label="Disabled" bind:checked={disabled} />
</div>

<h6>Basic</h6>

<small>Value: {value}</small>

<Slider min="0" max="100" bind:value {disabled} />

<h6 class="mt-8">With steps</h6>

<small>Value: {value2}</small>

<Slider min="0" step="20" max="100" bind:value={value2} {disabled} />