Range
Basic Example
<div id="slider"></div>
Using HTML5 input elements
<div id="html5"></div>
<div class="flex mt-3 gap-2">
<select id="input-select" class="form-select"></select>
<input type="number" class="form-input" min="-20" max="40" step="1" id="input-number">
</div>
Locking sliders together
<div class="slider" id="slider1"></div>
<span class="example-val text-gray-600 dark:text-zinc-100 mt-2" id="slider1-span"></span>
<div class="slider" id="slider2"></div>
<span class="example-val text-gray-600 dark:text-zinc-100 mt-2" id="slider2-span"></span>
<button id="lockbutton" class="rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold leading-5 text-white hover:bg-indigo-500 float-right">Lock</button>
Only showing tooltips when sliding handle
<div class="slider" id="slider-hide"></div>
Colored Connect Elements
<div class="slider" id="slider-color"></div>
Colorpicker
<div class="sliders" id="red"></div>
<div class="sliders" id="green"></div>
<div class="sliders" id="blue"></div>
<div id="result"></div>
Non linear slider
<div id="nonlinear"></div>
<span class="example-val text-gray-600 dark:text-zinc-100" id="lower-value"></span>
<span class="example-val text-gray-600 dark:text-zinc-100" id="upper-value"></span>
Creating a toggle
<div id="slider-toggle"></div>
Soft limits
<div class="mb-8" id="soft"></div>