---
layout: layouts/component.njk
title: Slider
description: An input where the user selects a value from within a given range.
toc:
  - label: Usage
    id: usage
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}

{% set code %}<input
  type="range"
  class="input w-full"
  min="0"
  max="100"
  value="50"
  x-data="{
    updatePercent(el) {
      const min = parseFloat(el.min || 0);
      const max = parseFloat(el.max || 100);
      const value = parseFloat(el.value);
      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
      el.style.setProperty('--slider-value', `${percent}%`);
    }
  }"
  x-init="updatePercent($el)"
  @input="updatePercent($el)"
>{% endset %}
{{ code_preview("slider", code, "w-full max-w-sm") }}

<h2 id="usage"><a href="#usage">Usage</a></h2>

<section class="prose my-6">
  <p>You can style an <code>&lt;input type="range"&gt;</code> element by either adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). However, the range input also requries some Javacript code to be able to paint the left side of the slider.</p>
</section>

{{ code_block(code) }}