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>

<!-- 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>

                                       
<!-- 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>

<!-- 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>