हेल्लो दोस्तों, आज हहम अपने इस पोस्ट में लेकर आये है Range Slider with min and max values जिसे हम HTML CSS and Java Script Code के माध्यम से बनाने वाले है जिसे हम अपने ब्लॉग में बहुत ही आसानी से Use कर सकते है इसको use करना बहुत ही आसान है इसके लिए आपको हमारे इस पोस्ट को लास्ट तक पढना है
Range Slider with min and max values Demo
नीचे Range Slider with min and max values का डेमो में आप देख सकते है
Range Slider with min and max values CSS Code
सबसे पहले हम Range Slider का style create करेंगे जिसका Code नीचे दिया गया है
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #ffc107;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #fd7e14;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
उपरोक्त दिए गए CSS Code में आप Range Slider का Size,Color, background, Pointer,width,height इन सभी का customisation अपने अनुसार कर सकते है
Range Slider with min and max values HTML Code
उपरोक्त CSS Code को लिखने के बाद हम नीचे दिए गए HTML Code को Add करेंगे
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
उपरोक्त HTML Code में हमें जितना Max या Min Value का निर्धारण कर सकते है जैसे जितना संख्या का हमें Value बनाना उतना संख्या को use लिखना है
Range Slider with min and max values Java Code
उपरोक्त CSS एवं HTML Code को लिखने के बाद अब हम Java Script Code को सबसे नीचे Add करेंगे
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
उपरोक्त CSS HTML एवं Java Script code को लिखने के बाद हमारा Range Slider with Min and Max Value का Project तैयार हो चूका है
Range Slider with min and max values Source Code
उपरोक्त दिए गए सभी Code का Compile Code नीचे दिए गए Copy Code के बटन पर Click करके कॉपी कर सकते है