Skip to content

Instantly share code, notes, and snippets.

@StSav012

StSav012/sliders.html

Last active October 31, 2017 15:21
Show Gist options
  • Save StSav012/1b373576b5374ff91cd50cf17f8381c8 to your computer and use it in GitHub Desktop.
Save StSav012/1b373576b5374ff91cd50cf17f8381c8 to your computer and use it in GitHub Desktop.
Download ZIP
An example of a dynamically created table of sliders, and their values, and miscellaneous info
Raw
sliders.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
color: inherit;
background: inherit;
}
table {
width: 100%;
}
table td {
text-align: center;
min-width: 3ch;
}
div#d1 {
text-align: center;
}
input[type="text"] {
width: 6ch;
color: inherit;
background: inherit;
}
input[type="number"] {
width: 6ch;
}
input[type="range"] {
background-color: transparent;
width: 100%;
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 16%;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #B6B6B6;
border-radius: 25px;
border: 1px solid #8A8A8A;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 1em;
width: 16%;
border-radius: 25px;
background: #DADADA;
cursor: pointer;
margin-top: -0.5em;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #B6B6B6;
}
input[type=range]::-moz-range-track {
height: 48%;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #B6B6B6;
border-radius: 25px;
border: 1px solid #8A8A8A;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 100%;
width: 16%;
border-radius: 6px;
background: #DADADA;
cursor: pointer;
}
input[type=range]::-ms-track {
height: 48%;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #F6B6B6;
border: 1px solid #8A8A8A;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #B6B6F6;
border: 1px solid #8A8A8A;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 100%;
width: 16%;
border-radius: 6px;
background: #DADADA;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #F6B6B6;
}
input[type=range]:focus::-ms-fill-upper {
background: #B6B6F6;
}
</style>
<script>
"use strict";
var intervalID = null;
var initTime = null;
function slid(event) {
event.target.parentNode.parentNode.children[4].children[0].value = event.target.value;
}
function input(event) {
event.target.parentNode.parentNode.children[3].children[0].value = event.target.value;
}
function timeString(num) {
var h, m;
var str = "";
if (num < 0) {
str = "−";
num = -num;
}
else {
str = "+";
}
h = Math.floor(num / 60);
str += ((h < 10) ? "0" : "") + h + ":";
m = Math.floor((num - h * 60));
(m < 10) && (str += "0");
str += m;
return str;
}
function timeVal(str) {
var s = 1, h, m;
if (str.startsWith("−")) {
str = str.substr(1);
s = -1;
}
var ss = str.split(':', 2);
return (parseInt(ss[0]) * 60 + parseInt(ss[1])) * s;
}
document.addEventListener('DOMContentLoaded', function() {
var t = document.querySelector('table#schedule');
var tbody = document.createElement("tbody");
var cap = document.createElement("caption");
var chb = document.createElement("input");
chb.setAttribute("type", "checkbox");
chb.setAttribute("id", "c1");
chb.setAttribute("onclick", "toggleTable(this)");
chb.setAttribute("checked", "checked");
cap.appendChild(chb);
var lbl = document.createElement("label");
lbl.setAttribute("for", "c1");
var text = document.createTextNode("Schedule");
lbl.appendChild(text);
cap.appendChild(lbl);
t.appendChild(cap);
t.appendChild(tbody);
}, false);
function toggleTable(object) {
"use strict";
var selector = "", s;
var me = object;
do {
me = me.parentNode;
} while (me.tagName !== "BODY" && me.tagName !== "CAPTION");
if (me.tagName == "BODY") {
return;
}
me = me.parentNode;
while (me.tagName !== "BODY") {
s = me.tagName;
if (me.id !== "") {
s += "#" + me.id;
}
if (selector.length !== 0) {
selector = " > " + selector;
}
selector = s + selector;
if (me.tagName === "TABLE") {
break;
}
me = me.parentNode;
}
if (me.tagName === "BODY") {
return;
}
var trs = document.querySelectorAll(selector + " > TBODY > TR, " + selector + " > TR");
var tr;
for (tr of trs) {
tr.style.display = object.checked ? 'table-row' : 'none';
}
}
function recountTime() {
var timeInt = Date.now() - initTime;
var time1 = document.querySelectorAll("table#schedule td:nth-child(1) input[type=text]");
var time2 = document.querySelectorAll("table#schedule td:nth-child(3) input[type=text]");
var trs = document.querySelectorAll("table#schedule tr");
var i;
for (i = 0; i < time1.length; i += 1) {
time1[i].value = timeString(timeVal(time1[i].value) - 1);
}
for (i = 0; i < time2.length; i += 1) {
time2[i].value = timeString(timeVal(time2[i].value) - 1);
}
for (i = 0; i < trs.length; i += 1) {
if (timeVal(time2[i].value) < 0) {
trs[i].style.opacity = "0.3";
trs[i].style.color = "inherit";
}
else if (timeVal(time1[i].value) <= 0) {
trs[i].style.opacity = "1";
trs[i].style.color = "blue";
}
else {
trs[i].style.opacity = "0.8";
trs[i].style.color = "inherit";
}
}
if (timeInt >= 12 * 60 * 1000) {
clearInterval(intervalID);
intervalID = null;
}
}
function start() {
initTime = Date.now();
if (intervalID === null) {
intervalID = setInterval(recountTime, 1000);
}
}
function resume() {
if (initTime === null) {
initTime = Date.now();
}
if (intervalID === null) {
intervalID = setInterval(recountTime, 1000);
}
}
function stop() {
clearInterval(intervalID);
intervalID = null;
}
function add() {
var tbody = document.querySelector('table#schedule > tbody');
var tr, td, text, time, slider, num, btn;
var value;
if (tbody.childElementCount) {
value = timeVal(tbody.children[tbody.childElementCount - 1].children[0].children[0].value);
}
else {
value = 0;
}
tr = document.createElement("tr");
td = document.createElement("td");
time = document.createElement("input");
time.setAttribute("type", "text");
time.setAttribute("value", timeString(value + 30));
time.setAttribute("min", timeString(value));
time.setAttribute("required", "required");
time.setAttribute("pattern", "[+−]?[0-2]?[0-9]:[0-5]?[0-9]");
td.appendChild(time);
tr.appendChild(td);
td = document.createElement("td");
text = document.createTextNode('–');
td.appendChild(text);
tr.appendChild(td);
td = document.createElement("td");
time = document.createElement("input");
time.setAttribute("type", "text");
time.setAttribute("value", timeString(value + 60));
time.setAttribute("required", "required");
time.setAttribute("pattern", "[+−]?[0-2]?[0-9]:[0-5]?[0-9]");
td.appendChild(time);
tr.appendChild(td);
td = document.createElement("td");
slider = document.createElement("input");
slider.setAttribute("type", "range");
slider.setAttribute("min", "4");
slider.setAttribute("max", "64");
slider.setAttribute("step", "1");
slider.setAttribute("value", Math.floor(Math.random() * (+slider.max - +slider.min)) + +slider.min);
slider.oninput = slid;
td.appendChild(slider);
tr.appendChild(td);
td = document.createElement("td");
num = document.createElement("input");
num.setAttribute("type", "number");
num.setAttribute("min", slider.min);
num.setAttribute("max", slider.max);
num.setAttribute("step", slider.step);
num.setAttribute("value", slider.value);
num.oninput = input;
td.appendChild(num);
tr.appendChild(td);
td = document.createElement("td");
btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "−");
btn.onclick = remove;
td.appendChild(btn);
tr.appendChild(td);
tbody.appendChild(tr);
}
function remove(event) {
var objToRemove = event.target.parentNode.parentNode;
objToRemove.parentNode.removeChild(objToRemove);
}
</script>
</head>
<body>
<h1>Hello!</h1>
<p>Press <strong>Add</strong> to add a rule, <strong>Start</strong> to start counting,
<strong>Stop</strong> to stop it, or <strong>Resume</strong> to continue from where you've stopped.</p>
<input type="button" value="Start" onclick="start()">
<input type="button" value="Resume" onclick="resume()">
<input type="button" value="Stop" onclick="stop()">
<table id="schedule">
</table>
<input type="button" value="Add" onclick="add()" accesskey="a">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment