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.