Customizing HTML range input with a floating DIV that contains current value
Solution 1
If you're not supporting old browsers, you can take advantage of the
<input type="range">
and some JavaScript to follow it along. See my Codepen: http://codepen.io/abhisharma2/pen/wMOpqz
Solution 2
An example with custom output
It's updating while you drag the input.
var el, newPoint, newPlace, offset;
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
// Select all range inputs, watch for change
$("input[type='range']").change(function() {
// Cache this for efficiency
el = $(this);
// Measure width of range input
width = el.width();
// Figure out placement percentage between left and right of input
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -1;
// Prevent bubble from going beyond left or right (unsupported browsers)
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint; }
// Move bubble
el
.next("output")
.css({
left: newPlace,
marginLeft: offset + "%"
})
.text(el.val());
})
// Fake a change to position bubble at page load
.trigger('change');
output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 40px;
height: 30px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 15px/30px Georgia;
bottom: 175%;
left: 0;
margin-left: -1%;
}
output:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #999999;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
form {
position: relative;
margin: 50px;
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
reference https://css-tricks.com/value-bubbles-for-range-inputs/
stack_pooper
Updated on June 05, 2022Comments
-
stack_pooper about 2 years
I'd like to create a range slider that has a div element follow the range thumb. This div element would contain the current value of the range input. How would I go about doing something like this? I've looked into styling the slider but don't know how I could add an actual element onto the thumb. It would look something like this, excuse my terrible drawing abilities:
Edit: The following div should update while slider is being dragged. UPDATE: I got a pretty good prototype going but cant seem to get it to follow the slider perfectly. It gets off center by a few pixels depending on where it is along the track. Heres my codepen
UPDATED CODE
HTML
<div id="slider-cntnr"> <input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)"/> <div id="slider-follow"> <div id="slider-val-cntnr"> <span id="slider-val"></span> </div> </div> </div>
CSS
html, body { width: 100%; height: 100%; } #slider-cntnr { width: 50%; margin: 40px; position: relative; } #frame-slider { width: 100%; margin: 0; } #slider-follow { margin-left: -14px; background-color: black; width: 30px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; } #slider-val-cntnr { background-color: white; width: 25px; height: 20px; }
JS
var follower = document.getElementById('slider-follow'); var follower_val = document.getElementById('slider-val'); var slider = document.getElementById('frame-slider'); var updateFollowerValue = function(val) { follower_val.innerHTML = val; follower.style.left = val + '%'; }; updateFollowerValue(slider.value);