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>