http://jsfiddle.net/gefkwqv6/8/ I found this, and when I wanted to implement it myself, it only shows a textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider test</title>
<link rel="stylesheet" href="css/c.css">
</head>
<body>
<h1>HTML Slider Test</h1>
<div class="range-slider">
<input type="text" class="js-range-slider" value=""/>
</div>
<div class="extra-controls">
From: <input type="text" class="js-input-from" value="0" readonly/>
To: <input type="text" class="js-input-to" value="0" readonly/>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/C.js" rel="script"></script>
</body>
</html>
And here is my JS
var $range = $(".js-range-slider"),
$inputFrom = $(".js-input-from"),
$inputTo = $(".js-input-to"),
instance,
min = 0,
max = 1000;
$range.ionRangeSlider({
type: "double",
min: min,
max: max,
from: 100,
to: 900,
onStart: updateInputs,
onChange: updateInputs,
onFinish: updateInputs
});
function updateInputs (data) {
$inputFrom.prop("value", data.from);
$inputTo.prop("value", data.to);
}
instance = $range.data("ionRangeSlider");
What am I missing? Do I need to import something else? Because at the moment I'm feeling oblivious that such a simple code won't work
I think you are missing some js and css files thease are :
ion.rangeSlider.js // js file
ion.rangeSlider.css //css file
ion.rangeSlider.skinHTML5.css // css file
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.