This code snippet allows you to create a range input with a slider and show the selected value on the slider. The HTML code defines the structure of the range input and the associated elements. The CSS code provides the styling for the range input, slider, and value display. The JavaScript code handles the interaction with the input slider and updates the displayed value accordingly. This code is helpful when you need to create a user-friendly interface for selecting values within a specific range and visually displaying the selected value on the slider.
How to Create Input Range and Show Value on Slider
1. Create the HTML structure for the range slider as follows:
<div class="range"> <div class="sliderValue"> <span>100</span> </div> <div class="field"> <div class="value left"> 0</div> <input type="range" min="10" max="200" value="100" steps="1"> <div class="value right"> 200</div> </div> </div>
2. Style the range slider using the following CSS styles:
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.cd__main{
background: #56CCF2 !important; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2F80ED, #56CCF2) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
min-height: 450px;
}
html,
body {
display: grid;
height: 100%;
text-align: center;
place-items: center;
}
.range {
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}
.range .sliderValue {
position: relative;
width: 100%;
}
.range .sliderValue span {
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.range .sliderValue span.show {
transform: translateX(-70%) scale(1);
}
.range .sliderValue span.show:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: dodgerblue;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.range .field {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.range .field .value {
position: absolute;
font-size: 18px;
color: dodgerblue;
font-weight: 600;
}
.range .field .value.left {
left: -22px;
}
.range .field .value.right {
right: -43px;
}
.range input {
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: dodgerblue;
border: 1px solid dodgerblue;
cursor: pointer;
}
.range input::-moz-range-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: dodgerblue;
border: 1px solid dodgerblue;
cursor: pointer;
}
.range input::-moz-range-progress {
background: dodgerblue;
}
3. To activate real-time updating values on the slider, add the following JavaScript function between the `<script>` and `</script>` tags just before closing the `<body>` element.
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = () => {
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = value / 2 + "%";
slideValue.classList.add("show");
};
inputSlider.onblur = () => {
slideValue.classList.remove("show");
};
Customization Guide
To customize the range slider, you can modify the CSS styles according to your preferences. Here are some aspects of the range slider that you can customize:
- Background and Colors: Adjust the background color, gradient, or image of the range slider by modifying the
backgroundproperty within the.rangeCSS class. You can change the colors of the slider thumb, track, and progress by updating thebackgroundproperty within the.range inputand.range input::-moz-range-progressCSS selectors. - Dimensions and Size: Modify the width, height, and padding values within the
.rangeCSS class to change the overall size and dimensions of the range slider. Adjust theheightproperty to change the height of the slider track and thewidthproperty to adjust the width of the entire slider. - Typography: Customize the font style, size, and color of the value display and any accompanying text. You can modify the properties within the
.range .sliderValue spanand.range .field .valueCSS selectors to change the appearance of the text. - Thumb Appearance: Alter the appearance of the slider thumb by adjusting the
background,border-radius, andborderproperties within the.range input::-webkit-slider-thumband.range input::-moz-range-thumbCSS selectors. This allows you to change the color, shape, and border of the slider thumb. - Additional Styling: Feel free to experiment with other CSS properties such as
box-shadow,transition, andoutlineto add visual effects, animations, or highlight interactions on the range slider.
That’s all! hopefully, you have successfully integrated this input range slider into your project. If you have any questions or suggestions, feel free to comment below.
