<div class="flex flex-col gap-4">
  <Slider label="Note" max="10" />
  <Slider label="Volume" class="w-full" percentage />
  <Slider disabled hideValue />
</div>

<div class="flex flex-col gap-4">
  <Slider label="primary" background="primary" />
  <Slider label="secondary" background="secondary" />
  <Slider label="success" background="success" />
  <Slider label="warning" background="warning" />
  <Slider label="danger" background="danger" />
</div>

<Slider min="0" max="4">
  Grade
  {#snippet output(value)}
    <span>{['E', 'D', 'C', 'B', 'A'][Number(value)]}</span>
  {/snippet}
</Slider>