Skip to content

Instantly share code, notes, and snippets.

@shapiromatron

shapiromatron/index.html

Created April 1, 2015 16:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shapiromatron/c01280c8eb97d0ff38d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shapiromatron/c01280c8eb97d0ff38d8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/gatiqiwivi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 20px;
height: 26px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 12px/24px Georgia;
bottom: 175%;
}
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: 100px; }
.helper{
font-size: 12px;
color: gray;
margin-top: 20px;
position: absolute;
}
.least{
left: -3%;
}
.most{
left: 6%
}
</style>
</head>
<body>
<form>
<input type="range" name="foo" min="1" max="7" list=volsettings>
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
<datalist id=volsettings>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</datalist>
<span class="helper least">less confidence</span>
<span class="helper most">more confidence</span>
</form>
<script id="jsbin-javascript">
var el, newPoint, newPlace, offset;
// 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 = -0;
// 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');
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form>
<input type="range" name="foo" min="1" max="7" list=volsettings>
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
<datalist id=volsettings>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</datalist>
<span class="helper least">less confidence</span>
<span class="helper most">more confidence</span>
</form>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 20px;
height: 26px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 12px/24px Georgia;
bottom: 175%;
}
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: 100px; }
.helper{
font-size: 12px;
color: gray;
margin-top: 20px;
position: absolute;
}
.least{
left: -3%;
}
.most{
left: 6%
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var el, newPoint, newPlace, offset;
// 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 = -0;
// 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');</script></body>
</html>
Raw
jsbin.gatiqiwivi.css
output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 20px;
height: 26px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 12px/24px Georgia;
bottom: 175%;
}
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: 100px; }
.helper{
font-size: 12px;
color: gray;
margin-top: 20px;
position: absolute;
}
.least{
left: -3%;
}
.most{
left: 6%
}
Raw
jsbin.gatiqiwivi.js
var el, newPoint, newPlace, offset;
// 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 = -0;
// 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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment