<div class="mb-3">
                <label for="customRange2" class="form-label text-secondary">Range with Min 0 and Max 5</label>
                <input type="range" class="form-range" min="0" max="5" id="customRange2">
            </div>
            <label for="customRange3" class="form-label text-secondary">Range with Min 0, Max 5 and steps 0.5</label>
            <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
                                

            <!-- range 1 -->
            <div class="range mb-4">
                <input type="range" id="range1" class="range1" />
            </div>
            
            <!--  range 2  -->
            <div class="range mb-4">
                <div class="row">
                    <div class="col"><input type="range" min="0" max="50" value="0" id="range2" class="range-input range2" /></div>
                    <div class="col-auto">
                        <div class="value2">0</div>
                    </div>
                </div>
            </div>
            
            <!--  range 3  -->
            <div class="range mb-4">
                <div class="row">
                    <div class="col"><input type="range" min="0" max="100" value="0" id="range3" class="range3" /></div>
                    <div class="col-auto">
                        <div class="value3">0</div>
                    </div>
                </div>
            </div>
            
            <!--  range 4  -->
            <div class="range mb-4">
                <div class="row">
                    <div class="col">
                        <div class="range-slider">
                            <label for="range" class="text-secondary">Select Temperature:</label><br />
                            <input type="range" min="0" max="100" value="0" class="range-input range4" id="range4" step="25" />
                            <div class="sliderticks">
                                <span>0</span>
                                <span>25</span>
                                <span>50</span>
                                <span>75</span>
                                <span>100</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="value4">0</div>
                    </div>
                </div>
            </div>
            
            <script>
            <!-- these functions are already in function js -->
            	/* range sliders  */
            	range2();
            	range3();
            	range4();
            </script>
                                

            <div class="range theme-red mb-4">
                <input type="range" id="range1" class="range1" value="10" />
            </div>
            <div class="range theme-purple mb-4">
                <input type="range" id="range1" class="range1" value="20" />
            </div>
            <div class="range theme-indigo mb-4">
                <input type="range" id="range1" class="range1" value="30" />
            </div>
            <div class="range theme-green mb-4">
                <input type="range" id="range1" class="range1" value="40" />
            </div>
            <div class="range theme-yellow mb-4">
                <input type="range" id="range1" class="range1" value="50" />
            </div>
            <div class="range theme-orange mb-4">
                <input type="range" id="range1" class="range1" value="60" />
            </div>
            <div class="range theme-pink mb-4">
                <input type="range" id="range1" class="range1" value="70" />
            </div>
            <div class="range theme-brown mb-4">
                <input type="range" id="range1" class="range1" value="80" />
            </div>
            <div class="range theme-grey mb-4">
                <input type="range" id="range1" class="range1" value="90" />
            </div>
            <div class="range theme-black mb-4">
                <input type="range" id="range1" class="range1" value="100" />
            </div>