Javascript Volume Slider draggable handle position update -

I'm not exactly the same, I am making a volume control slider mechanism and handle control position.

I found the code on a JS Belal

  .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; Boundary-radius: 4px; Cursor: indicator; Height: 10px; Status: Relative; Width: 300px; Top: 50%; Margin-top: -5px; } .sks_hhorizontal {background: # 0b84b2; Range radius: 100px; Border: 5px solid #fff; Cursor: indicator; Height: 10px; Status: Completed; Width: 10px; Top: 50%; Margin-top: -10 pixels; } .sks_progressbar {background: # bbd45d; Display: Inline-block; Height: 100%; Status: Relative; Height: 30px; } & Lt; Div id = "video" class = "video" & gt; & Lt; / Div & gt; 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) Kattr ( "class")); if (hDirection == "sks_hhorizontal") {var hContainer = $ (Handle) .Parent (width) (width ); Var bound = hContainer - $ (handle) .width (); Var offset = $ (SBR). Offset () left; var hPos = e.pageX - offset; if ((hPos & lt; = in range & Amp; amp; hPos> = 0)) {$ (handle) .css ({'left': hPos}); }}}); }); $ (Document) .mouseup (function (e) {$ (document). Unbind ('mousemove');}); } Return {create: createSlider}; }) (); Var elemh = $ ("#video"). Attr ("id"); Var orientation = "horizontal"; Sks_slider.create (elemh, orientation); I think my math can be out when I pull the handle in the center and then drag it back to the right before moving it in the direction.  
 If someone tells me where I am wrong then he would be very much appreciative.  
 Thanks   
 
 
 I  & lt; Input type = "category" & gt; . This makes your code very simple and beautiful, for example see.