I want to create a slider element (input type range) in JavaScript that jumps back to its initial value after release. In this way I get the behaviour like a joystick that jumps back to its equilibrium position after release.
I now have the following code:
var element = document.createElement('input');
element.type = "range";
element.min = myObject.min;
element.max = myObject.max;
element.step = myObject.step;
valueDiv.className = myObject.type + "_value";
elementDiv.appendChild(valueDiv);
element.defaultValue = myObject.init; //value does not show up in HTML simply because the attribute does not exist
valueDiv.innerHTML = myObject.init;
element.oninput = function() { //use oninput to get values continously during changing (onchange only gives value after mouseup)
valueDiv.innerHTML = this.value; //display changed value
}
element.onchange = function() { //use onchange to define an action after release (mouseup) of the slider)
valueDiv.innerHTML = myObject.init; //display changed value
// code here to let the element show the position that reflects element.defaultValue
// this position is only shown after loading the page
//code here //send changed value
}
I use the element.oninput event to continuously show the changing value in valueDiv when I draw the slider. The element.onchange event fires when the slider is released (on mouseup). The valueDiv then shows the initial value (element.defaultValue). I want the position of the slider to reflect this initial value. I did not discover an action/function of the element do that.
I just found the answer here:
How can I update the position of a range input slider via vanilla js? by Scott Marcus
When I add element.value = myObject.init the slider jumps to the position that fits with the value init.