I'm currently utilizing this specific JavaScript range slider and my goal is to define a minimum and maximum value in pixels, rather than the default percentage range from 0 to 100.
I have successfully implemented the min and max settings, now my next challenge is converting all the percentage values to pixel amounts. I managed to achieve this for the drag function, but I'm facing difficulties applying it to the value.
For example, when I set the value to 50, instead of reaching 50px, it defaults to 50%. How can I convert all the percentages to pixels?
If there is a more efficient method to achieve this, please share your insights.
I believe the key code that needs adjustment is in the final function named initDragger:
cachePosition = ((config.value / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']);
dragger.style[!isVertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';
function rangeSlider(elem, config) {
// JavaScript range slider code here
}
var slide = document.getElementById('range-slider');
var resultP = document.getElementById('results');
var button = document.getElementById('button');
rangeSlider(slide, {
value: 50,
drag: function(v) {
document.getElementById('results').innerHTML = "Your Current Value is: " + v;
},
max: 60
});.range-slider-track {
height: 20px;
}
.range-slider-track:before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
}
.range-slider-track .dragger {
display: block;
width: 10px;
height: inherit;
position: relative;
background-color: red;
}<div id="range-slider"></div>
<p id="results"></p>