@extends('layouts.vertical', ['title' => 'Range', 'sub_title' => 'Forms', 'mode' => $mode ?? '', 'demo' => $demo ?? '']) @section('css') @vite(['node_modules/nouislider/dist/nouislider.min.css']) @endsection @section('content')
<div id="slider"></div>
<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>
<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>
<div class="slider" id="slider-hide"></div>
<div class="slider" id="slider-color"></div>
<div class="sliders" id="red"></div>
<div class="sliders" id="green"></div>
<div class="sliders" id="blue"></div>
<div id="result"></div>
<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>
<div id="slider-toggle"></div>
<div class="mb-8" id="soft"></div>