I'm running crazy to get some javascript and css running on an ESP8266. It runs very well directly on my browser (FireFox) from local files, but if I upload these files to an ESP, it refuses to display the slider.
The necessary js and css files are:
nouislider.min.js
nouislider.css
They can be downloaded here:
https://github.com/leongersen/noUiSlide ... aster/dist
The html file to try it (I called it aha.html) is
Code: [Local Link Removed for Guests]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./nouislider.css">
</head>
<body>
<div >
<div id="kt_slider_basic"></div>
<div >
<div >Min: <span id="kt_slider_basic_min"></span></div>
<!-- <div class="fw-semibold mb-2">Min: <textbox$(t_min,"kt_slider_basic_min")</div>a-->
<div >Max: <span id="kt_slider_basic_max"></span></div>
</div>
</div>
<script src='nouislider.min.js'></script>
<script src='aha.js'></script>
</body>
</html>
Code: [Local Link Removed for Guests]
var slider = document.querySelector("#kt_slider_basic");
var valueMin = document.querySelector("#kt_slider_basic_min");
var valueMax = document.querySelector("#kt_slider_basic_max");
noUiSlider.create(slider, {
start: [480, 1230],
connect: true,
range: {
min: 360,
max: 1380
},
step: 15
});
slider.noUiSlider.on("update", function (values, handle) {
var hours1 = Math.floor(values[0] / 60);
var minutes1 = values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
hours1 = hours1;
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
valueMin.innerHTML = (hours1 + ':' + minutes1);
var hours2 = Math.floor(values[1] / 60);
var minutes2 = values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
hours2 = hours2;
valueMax.innerHTML = (hours2 + ':' + minutes2);
});
What's the magic spell?
Thanks for your help
Ulli
