I don't have any expertise in coding or web development. After hours of research in Google, I ended up writing a set of (perfectly working) codes to build a range slider with HTML, CSS and JS.
I'm using this slider to change media volume in my smartphone, in this Media Control Panel created using an Android application called Tasker. My slider is functional, but I want to make some cosmetic changes to my slider.
Could someone please help me to implement following into my code?
This is the current code. Feel free to edit this.
<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>
<style>
.container{
display:flex;
width:100%;
padding-top:5
}
#volm{
-webkit-appearance: none;
background-color: magenta;
border-radius: 2px;
width:153px;
height:5px;
</style>
<script>
var slider = document.getElementById("volm");
slider.addEventListener("input",function()
{
performTask("WebView Slider - Media Volume",1,slider.value,)}, false);
</script>HTML Range Input has the following two pseudo-elements:
You can style them using the pseudo-selectors. This CodePen has a clever solution in achieving what you intend. By using box-shadows on the thumb, you can style the area before and after the thumb. Use multiple box-shadows + blurring to achieve gradient-like effects.
I edited your code a little to show how the above can be achieved. Rest is just about preferences on how you want the slider to look like. You can also use JavaScript to dynamically change property values depending on the input.
.container{
display:flex;
width:100%;
padding-top:5;
height: fit-content;
}
#volm{
position: relative;
margin-top: 5px;
border-radius: 2px;
width:153px;
height: 5px;
-webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
position: relative;
box-sizing: border-box;
background-color: hsl(0deg, 0%, 90%);
width: 100%;
height: 20px;
border-radius: 5px;
overflow: hidden;
}
input::-webkit-slider-thumb {
position: relative;
left: initial;
bottom: 5px;
-webkit-appearance: none;
background-color: blue;
width: 20px;
height: 20px;
border-radius: 20px;
box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
margin-top: 5px;
}<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>