In this example code below:
-The thumb of the range slider is normally set to 70% of the container divided by fCount. fCount represents the max value of the slider (the increment). The width of the thumb shrinks down to 25px minimum value (defined by the variable fMin) if the page is not wide enough or if the fCount is relatively higher.
There are two goals I'd like to achieve:
1- The incremental value of the slider, by width, must be the same as the width of the thumb regardless of the screen / browser size. I mean, it needs to be moved on y axis always by the same value (fMin / 25px in this example) if the thumb gets its min value. It works if the fCount is, say 3. But higher values like 50, the area of movement really shrinks down. So I want it to overflow to keep that consistent increment and be able to scroll on y axis.
2- The divs with the class "fBlock" represent the ticks centered in the blocks over the slider. I never seem to be able to put them side by side while keeping their position over the slider. They either drop down or rendered next to the slider. I tried various methods like position: relative, position: absolute, grid and float:left but none worked.
What would be the Javascript / CSS solutions to those problems?
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--fCount: 30;
--fMin: 25px;
--fHeight: 30px;
}
.slidecontainer {
width: 70%;
overflow-x: scroll;
overflow-y: hidden;
margin: auto;
position: relative;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: var(--fHeight);
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
padding: 0;
margin: 0;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(100% / var(--fCount));
min-width: var(--fMin);
height: var(--fHeight);
background: #04AA6D;
cursor: default;
}
.slider::-moz-range-thumb {
width: calc(100% / var(--fCount));
min-width: var(--fMin);
height: var(--fHeight);
background: #04AA6D;
cursor: default;
}
.fBlock {
width: calc(100% / var(--fCount));
min-width: 25px;
height: var(--fHeight);
line-height: 25px;
position: absolute;
top: 0px;
float:left;
pointer-events: none;
text-align: center;
}
</style>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="1" value="0" class="slider" id="myRange">
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
<div class="fBlock">|</div>
</div>
<script>
var fCount =30;
// get the range input element
var rangeInput = document.getElementById("myRange");
// set the max value of the range slider based on fCount
rangeInput.max = fCount;
// set the value of the range slider thumb position
rangeInput.value = 0;
</script>
</body>
</html>