Get the cursor position as a percentage

Question

I am trying to create a custom range slider. I am having problems getting the cursor position as a percentage (i.e. 1 - 100).

Here is the relevant code:

var cursorPosition = e.clientX - startPoint.left - cursorRadius; cursorPosition = clamp(cursorPosition, startPoint.left- cursorRadius, sliderDimention- cursorRadius*2); function clamp(value, min, max) { return Math.min(Math.max(value, min), max); } 

I tried the following:

 console.log((cursorPosition / sliderDimention) * 100); 

It works almost right. The only problem is that it is from -2 to 95 (rounded). How to get slider position as a percentage?

(Please do not post any jQuery or other “you can use the 'this' plugin answers.” I am doing this for training purposes and I want to create my own. Thank you!)

Jsfiddle

 function RangeSlider( /** DOM Elem */ parentElem) { var wrapperElem = document.getElementsByClassName('wrapperElem')[0], slider = document.getElementsByClassName('slider')[0], sliderCursor = document.getElementsByClassName('sliderCursor')[0]; var sliderDimention = slider.offsetWidth, cursorRadius = sliderCursor.offsetHeight / 2, startPoint, currentTarget; function sliderDown(e) { e.preventDefault(); currentTarget = null; var sliderWithDescendents = wrapperElem.querySelectorAll('*'); for (var i = 0; i < sliderWithDescendents.length; i++) { sliderWithDescendents[i] if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) { currentTarget = wrapperElem.children[0]; break; } } if (currentTarget === null) return; startPoint = getOrigin(currentTarget); sliderDimention = slider.offsetWidth; window.addEventListener('mousemove', sliderMove); sliderMove(e); } function sliderMove(e) { var cursorPosition = e.clientX - startPoint.left - cursorRadius; cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius, sliderDimention - cursorRadius * 2); console.log((cursorPosition / sliderDimention) * 100); sliderCursor.style.transform = 'translateX(' + (cursorPosition) + 'px)'; } function mouseUpEvents() { window.removeEventListener('mousemove', sliderMove); } wrapperElem.addEventListener('mousedown', sliderDown); window.addEventListener('mouseup', mouseUpEvents); } var sliderTest = document.getElementById('sliderTest'); var test = new RangeSlider(sliderTest); function clamp(value, min, max) { return Math.min(Math.max(value, min), max); } function getOrigin(elm) { var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : { top: 0, left: 0 }, doc = elm && elm.ownerDocument, body = doc.body, win = doc.defaultView || doc.parentWindow || window, docElem = doc.documentElement || body.parentNode, clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both clientLeft = docElem.clientLeft || body.clientLeft || 0; return { left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft, top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop }; } 

 .wrapperElem { height: 18px; width: 100%; cursor: pointer; display: flex; } .slider { height: 100%; width: calc(100% - 62px); border: 1px solid black; } .sliderCursor { width: 14px; height: 14px; border-radius: 50%; border: 2px solid black; } 

 <div class="wrapperElem"> <div class="slider"> <div class="sliderCursor"></div> </div> </div> 

Answer 1

You forgot to take into account several things:

• Borders .slider to define cursorPosition

• Subtract the borders and start the .slider position from the sliderDimention

   cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius + 1, sliderDimention - 1 - cursorRadius*2); console.log((cursorPosition / (sliderDimention - 2 - startPoint.left - cursorRadius)) * 100); 

Jsfiddle