Range Slider
- Robotech
- /
- Advanced UI
- /
- Range Slider
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="slider"></div>
Only showing tooltips when sliding handles
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="slider_2"></div>
Using HTML5 input elements
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="html5" class="mb-4"></div>
<div class="flex flex-wrap gap-4">
<div class="sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
<select class="form-select rounded bg-gray-50/5 border border-gray-300 text-gray-900 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2 dark:bg-slate-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-400 dark:focus-visible:outline-none" id="input-select"></select>
</div>
<div class="sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/4">
<input type="number" class="rounded bg-gray-50/5 border border-gray-300 text-gray-900 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2 dark:bg-slate-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-400 dark:focus-visible:outline-none" min="-20" max="40" step="1" id="input-number">
</div>
</div>
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="slider-date" class="mb-4"></div>
<span class="example-val text-xs text-slate-400 block font-medium" id="event-start"></span>
<span class="example-val text-xs text-slate-400 block font-medium" id="event-end"></span>
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="skipstep" class="mb-2"></div>
<span class="example-val text-xs text-slate-400 block font-medium" id="skip-value-lower"></span>
<span class="example-val text-xs text-slate-400 block font-medium" id="skip-value-upper"></span>
Moving the slider by clicking pips
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="slider-pips"></div>
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="range"></div>
<div class="text-center text-xs">
<span id="range-value-4" class="dark:text-slate-400"></span> -
<span id="range-diff-3" class="text-primary-500"></span> -
<span id="range-value-3" class="dark:text-slate-400"></span> -
<span id="range-diff-2" class="text-primary-500"></span> -
<span id="range-value-2" class="dark:text-slate-400"></span> -
<span id="range-diff-1" class="text-primary-500"></span> -
<span id="range-value-1" class="dark:text-slate-400"></span>
</div>
<!-- Css -->
<link rel="stylesheet" href="assets/libs/nouislider/nouislider.min.css">
<!-- JS -->
<script src="assets/libs/nouislider/nouislider.min.js"></script>
<script src="assets/libs/wnumb/wNumb.min.js"></script>
<script src="assets/js/pages/nouislider.init.js"></script>
<!-- HTML -->
<div id="soft"></div>
@@include("partials/footer/footer.html")