{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 手持菜刀，她持情操 的问题《Getting values from html inputs》','https://www.manongdao.com/q-1125449.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have an input element that is a range slider that I wanted to turn into a slider with a lower and an upper bound. This feature isn't implemented yet for range although it's being discussed. As you can see this is a popular question.
My issue is that the way I was retrieving the results of the slider no longer seems to work and I don't understand why. My original slider works like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<label for="slider">
<input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
stuff: <output name="sliderAmount" for="slider">0</output>
</label>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("slider");
var amtChange = function () {
document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
Every time you slide the bar it updates the stuff div with the new result. I want to be able do the same thing with the jquery slider but update the stuff div with the range instead.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<form>
<label for="amount">Price range:</label>
<input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("amount");
var amtChange = function () {
document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
However, this doesn't seem to be able to pull the range from the slider input. If I go into the console in Chrome for the jquery example I can type amt.value and it will return the value every time. What am I missing here?
Just trigger the
change()method forinputwhile changing it's value.Try this:
DEMO: FIDDLE
You can use the change event of jQuery UI Range Slider. Use it and append updated changes to stuff like below.