Javascript Volume Slider draggable handle position update

Question

I'm creating a volume control slider mechanism and the handle control is not positioning itself properly.

I've got the code on a js fiddle volume control slider

.video {
    background: #494b43;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    display: inline-block;
    height: 40px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.sks_horizontal {
    background-color: #63665b;
    border-radius: 4px;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 300px;
    top: 50%;
    margin-top: -5px;
}
.sks_hhorizontal {
    background: #0b84b2;
    border-radius: 100px;
    border: 5px solid #fff;
    cursor: pointer;
    height: 10px;
    position: absolute;
    width: 10px;
    top: 50%;
    margin-top: -10px;
}
.sks_progressbar {
    background: #bbd45d;
    display: inline-block;
    height: 100%;
    position: relative;
    height: 30px;
}


    <div id="video" class="video"></div>

var sks_slider = (function () {

    var createSlider = function (elem, orientation) {

        var sBar = document.createElement("div");
        var handle = document.createElement("span");
        sBar.id = "sks_seekbar";
        document.getElementById(elem).appendChild(sBar);
        document.getElementById("sks_seekbar").appendChild(handle);
        var pBar = document.createElement("div");
        pBar.id = "sks_progressbar";
        document.getElementById("sks_seekbar").appendChild(pBar);


        document.getElementById("sks_seekbar").id = "sks_seekbar_horizontal";
        handle.className = "sks_hhorizontal";
        sBar.className = "sks_horizontal";


        $(handle).mousedown(function (e) {
            $(document).bind("mousemove", function (e) {
                var hDirection = ($(handle).attr("class"));

                if (hDirection == "sks_hhorizontal") {

                    var hContainer = $(handle).parent().width();
                    var bounds = hContainer - $(handle).width();
                    var offset = $(sBar).offset().left;

                    var hPos = e.pageX - offset;

                    if ((hPos <= bounds && hPos >= 0)) {
                        $(handle).css({
                            'left': hPos
                        });
                    }
                }


            });
        });

        $(document).mouseup(function (e) {
            $(document).unbind('mousemove');
        });

    }

    return {
        create: createSlider
    };
})();

var elemh = $("#video").attr("id");
var orientationh = "horizontal";
sks_slider.create(elemh, orientationh);

I guess my maths may be out as when I drag the handle to the centre and then drag it back again it moves to the right before going in the direction it should.

If anyone can point out where I'm going wrong it would be greatly appreciated.

thanks

Answer 1

I suggest using <input type="range">. This makes your code a lot simpler and prettier. See http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range for an example.

Answer 2

Seems the little move to the side is because of by the width of the handle. I changed the javascript to

var offset = $(sBar).position().left;
var hPos = e.pageX - (offset + $(handle).width());