Determine click position on progress bar?
You can get the coordinates of where you clicked inside of the element like this:
Just subtract the offset position of the element from the coordinate of where the page was clicked.
Updated Example
document.getElementById('progressBar').addEventListener('click', function (e) {
var x = e.pageX - this.offsetLeft, // or e.offsetX (less support, though)
y = e.pageY - this.offsetTop, // or e.offsetY
clickedValue = x * this.max / this.offsetWidth;
console.log(x, y);
});
If you want to determine whether the click event occurred within the value range, you would have to compare the clicked value (in relation to the element's width), with the the value attribute set on the progress element:
Example Here
document.getElementById('progressBar').addEventListener('click', function (e) {
var x = e.pageX - this.offsetLeft, // or e.offsetX (less support, though)
y = e.pageY - this.offsetTop, // or e.offsetY
clickedValue = x * this.max / this.offsetWidth,
isClicked = clickedValue <= this.value;
if (isClicked) {
alert('You clicked within the value range at: ' + clickedValue);
}
});
<p>Click within the grey range</p>
<progress id="progressBar" value="5" max="10"></progress>
$(document).ready(function() {
$(".media-progress").on("click", function(e) {
var max = $(this).width(); //Get width element
var pos = e.pageX - $(this).offset().left; //Position cursor
var dual = Math.round(pos / max * 100); // Round %
if (dual > 100) {
var dual = 100;
}
$(this).val(dual);
$("#progress-value").text(dual);
});
});
.media-progress {
/*BG*/
position: relative;
width: 75%;
display: inline-block;
cursor: pointer;
height: 14px;
background: gray;
border: none;
vertical-align: middle;
}
.media-progress::-webkit-progress-bar {
/*Chrome-Safari BG*/
background: gray;
border: none
}
.media-progress::-webkit-progress-value {
/*Chrome-Safari value*/
background: #17BAB3;
border: none
}
.media-progress::-moz-progress-bar {
/*Firefox value*/
background: #17BAB3;
border: none
}
.media-progress::-ms-fill {
/*IE-MS value*/
background: #17BAB3;
border: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="5" max="100" class="media-progress"></progress>
<div id="progress-value"></div>
If you want the value clicked for a generic max
value (a value between 0 and 1 in this case), you just need some simple math.
document.getElementById('progressBar').addEventListener('click', function (e) {
var value_clicked = e.offsetX * this.max / this.offsetWidth;
alert(value_clicked);
});
Fiddle