Basic Range Slider
<div class="rangeslider_basic"></div>
Multi Elements Range
<div id="rangeslider_multielement"></div>
Value Range Slider
<div>
<div id="nonlinear"></div>
<div class="flex justify-between mt-3">
<div class="example-val" id="lower-value"></div>
<div class="example-val" id="upper-value"></div>
</div>
</div>
Color Scheme
<div>
<div class="mb-4">
<h6 class="mb-2 text-sm">Primary</h6>
<div class="primary-range" id="rangeslider_basic"></div>
</div>
<div class="mb-4">
<h6 class="mb-2 text-sm">Success</h6>
<div class="success-range" id="rangeslider_basic"></div>
</div>
<div class="mb-4">
<h6 class="mb-2 text-sm">Info</h6>
<div class="info-range" id="rangeslider_basic"></div>
</div>
<div class="mb-4">
<h6 class="mb-2 text-sm">Warning</h6>
<div class="warning-range" id="rangeslider_basic"></div>
</div>
<div>
<h6 class="mb-2 text-sm">Danger</h6>
<div class="danger-range" id="rangeslider_basic"></div>
</div>
</div>
Locking Sliders Together
<div>
<div class="slider" id="slider1"></div>
<span class="example-val mt-1" id="slider1-span"></span>
<div class="slider" id="slider2"></div>
<span class="example-val mt-1" id="slider2-span"></span>
<button id="lockbutton" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white mt-4">Lock</button>
</div>
Tooltip
<div class="slider mt-13" id="slider-merging-tooltips"></div>
Soft Limits
<div class="slider mb-2" id="soft"></div>
Color Picker
<div class="flex items-center gap-8">
<div>
<div class="sliders" id="red"></div>
<div class="sliders" id="green"></div>
<div class="sliders" id="blue"></div>
</div>
<div id="result"></div>
</div>
Multi Range
<div id="slider-vertical" class="mx-auto"></div>
Vertical Range
<div id="slider-connect-upper" class="mx-auto"></div>
Vertical Tooltip
<div id="slider-vertical-tooltip" class="mx-auto"></div>
ENG
ARB
GER
