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