totally newbie with css, html and js scripting here. I'm basically googling for the things I want to implement and modify existing code. I'm building a web interface to control a couple of motors and I'm using range sliders to control their direction and speed (slide to the right --> move to right, etc. Also the further the slider the faster the motors move). My current setup is the following
function gripBidirectional() {
var delayInMilliseconds = 250;
setTimeout(function() {
var bcw = document.getElementById('bcw').value;
var posBcw = Math.abs(bcw);
if(posBcw < 40){
document.getElementById('bcw').value = 0
var rot = 0 << 10 | 0 ;
var rotstr = '@'+ rot.toString(16);
//connection.send(rotstr);
}
if(bcw < 0 ){
//left
var rot = posBcw << 10 | 1 ;
var rotstr = '^'+ rot.toString(16);
//connection.send(rotstr);
} else {
// right
var rot = posBcw << 10 | 0 ;
var rotstr = '@'+ rot.toString(16);
//connection.send(rotstr);
}
}, delayInMilliseconds);
}:root{
--myTrackColor: rgb(0,201,255);
--myThumbColor: rgb(152,162,174);
}
.slider {
-webkit-appearance: none;
-webkit-transition: .2s;
transition: opacity .2s;
width: 380px; /* Height of the scrollbar */
height: 8px; /* Height of the scrollbar */
border-radius: 5px; /* This is the radius for the scroll bar */
background: rgb(190,200,210); /* If height too big, then you need this to have the same color in the scrollbar */
outline: none;
opacity: 0.7;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: solid;
border-width: thin;
border-color: white;
border-radius: 50%;
background: var(--myThumbColor); /* This is color for the circle */
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border: solid;
border-width: thin;
border-color: white;
border-radius: 50%;
background: var(--myThumbColor); /* This is color for the circle */
cursor: pointer;
}
/* The following only affects the range input in FF */
input[type="range"]::-moz-range-progress {
background-color: var(--myTrackColor);
height: 8px; /* Height of the scrollbar */
border-radius: 5px; /* This is the radius for the scroll bar */
}
input[type="range"]::-moz-range-track {
background-color: white;
height: 8px; /* Height of the scrollbar */
border-radius: 5px; /* This is the radius for the scroll bar */
}<!DOCTYPE html>
<html>
<head>
<title>Robotic Arm Control Panel</title>
<link href='main.css' rel='stylesheet' type='text/css'>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
<script src="https://stacksnippets.net/js" type="text/javascript"></script>
</head>
<div>
<input class="slider" style="margin-top:40px" id="bcw" type="range" min="-255" max="255" step="1" oninput="gripBidirectional();" value="0">
</div>
<table>
<tr>
<td style="padding-left: 0px; text-align: left">LEFT </td>
<td style="padding-left: 300px; text-align: right">RIGHT </td>
</tr>
</table>
</body>
</html>Currently the left area is filled up with the blue color that indicates progress, but what I want to achieve is that the slider is initiated at the null position with the neutral grey background for both directions. Then as I slide it to the left or right it gets filled up with the background blue color.
thanks in advance