Bootstrap Snippet Customizing HTML range input with a floating DIV that contains current value using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<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>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Customizing HTML range input with a floating DIV that contains current value"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Customizing HTML range input with a floating DIV that contains current value" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Customizing HTML range input with a floating DIV that contains current value"
Bootstrap 4.1.1 Snippet by muhittinbudak