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