Skip to content

Range

Docs & Examples

Source

Example

Multi

html
<div class="flex justify-between items-center">
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="from" aria-label="Cena od">0</output>
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="to" aria-label="Cena do">10,000</output>
</div>

<div class="x-range mt-1 items-center" data-controller="x-range">
    <input type="range" value="0" step="100" max="10000" min="0" aria-labelledby="from" data-action="input->x-range#setValue" data-x-range-track-param="start">
    <input type="range" value="10000" step="100" max="10000" min="0" aria-labelledby="to" data-action="input->x-range#setValue" data-x-range-track-param="end">
</div>

Single

html
<div class="flex justify-between items-center">
    <output class="x-title xs font-normal flex gap-1 after:content-[attr(data-unit)]" data-unit="Kč" id="single" aria-label="Cena od">0</output>
</div>

<div class="x-range mt-1 items-center" data-controller="x-range">
    <input type="range" value="0" step="100" max="10000" min="0" aria-labelledby="single" data-action="input->x-range#setValue">
</div>

Stimulus Actions

setValue

Set's values via setValue, setOutputValue and setTrackProperty methods.

Released under the MIT License.