44 lines
1,008 B
HTML
44 lines
1,008 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvents,Element.prototype.closest"></script>
|
|
<link rel="stylesheet" href="slider.css">
|
|
<script src="slider.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="slider" class="slider">
|
|
<div class="thumb"></div>
|
|
</div>
|
|
|
|
|
|
Slide:<span id="slide"> </span>
|
|
Change:<span id="change"> </span>
|
|
|
|
<button onclick="slider.setValue(50)">slider.setValue(50)</button>
|
|
|
|
<script>
|
|
|
|
var sliderElem = document.getElementById('slider');
|
|
|
|
var slider = new Slider({
|
|
elem: sliderElem,
|
|
max: 100
|
|
});
|
|
|
|
sliderElem.addEventListener('slide', function(event) {
|
|
document.getElementById('slide').innerHTML = event.detail;
|
|
});
|
|
|
|
sliderElem.addEventListener('change', function(event) {
|
|
document.getElementById('change').innerHTML = event.detail;
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|