Custom HTML5 range input and handle offset

Question

I have an issue with a custom range input which updates a div in real time for video seeking which can be seen in this HTML5 video demo.

When the hidden range input is dragged, the position of the custom div changes slightly towards each end of the custom bar and doesn't remain on top of the cursor.

Here is a simplified example and code: https://jsfiddle.net/Lk9d8gjh/

You can see that the slider range value is computed by the left part of the handle at the start and then the right part of the handle at the end. Is there anyway I can change this so the range value is computed from the center of the handle thus removing this 'laggy' feel. I would expect the custom div to remain directly on top of my cursor at all times.

I've attempted changing the width of the thumb with:

input[type=range]::-webkit-slider-thumb

But still no luck. Below is the simplified custom range input code.

.slider-track {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: gray;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    background: green;    
}

.slider-input {
    margin: 0;
    padding: 0;
    width: 100%;
}

<div class="slider-track">
    <div class="slider"></div>
    <input class="slider-input" type="range" max="100" min="0"/>
</div>

$('.slider-input').on('input', function(e) {
    $('.slider').width(e.target.value + '%');
});

Vincent · Accepted Answer · 2015-11-02 21:13:23Z

1

Well.. it certainly won't be perfect, since it's kind of a "hack" I guess, but this comes close to what I think you want. It keeps the end of the green bar in the center of the input handle.

I think there could be a better way of calculating this to do the same trick. But I'm not good enough at maths to figure that one out I guess :)

https://jsfiddle.net/o3pvv21t/

$('.slider-input').on('input', function(e) {
    var valueOfInput = Number(e.target.value);
    if(valueOfInput < 25) {
        var desiredWidth = valueOfInput + ((1.5/100)*(100-valueOfInput));
    } else if(valueOfInput >= 25 && valueOfInput <= 50) {
        var desiredWidth = valueOfInput + ((0.75/100)*(100-valueOfInput));
    } else if(valueOfInput >= 51 && valueOfInput <= 75) {
        var desiredWidth = valueOfInput - ((0.75/100)*valueOfInput);
    } else {
        var desiredWidth = valueOfInput - ((1.5/100)*valueOfInput);
    }
    $('.slider').width(desiredWidth + '%');
});

answered Nov 2, 2015 at 21:13

Vincent

3481 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Derrick Over a year ago

This does answer my question but in a very unique way! It also means it is impossible to get the values 0 or 100 now though. I was hoping to simple change the width of the handle but it doesn't seem possible.

Vincent Over a year ago

i know! I've searched for a better solution. After I couldn't find a thing this "hack" was sort of the next best idea.. (less worst idea?) You could tweak the calculations or put extra conditions in it to match (v <= 1) and (v >= 99) to get zero and 100.

Collectives™ on Stack Overflow

Custom HTML5 range input and handle offset

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related