Control DC Motor with Arduino Uno WiFi Rev2 Html Slider Code

Question

I would like to control my dc motor using the Arduino Uno WiFi Rev2 using an html range slider. Now I can control the motors speed and direction using push buttons just fine. My code is posted below of what I've done so far.

client.println("<style>");
client.println(".class-name{writing-mode: bt-lr; webkit-appearance: slider-vertical;width: 8px;height: 175px;padding: 0 5px;}</style>");
client.println("<center><input type=\"range\" class=\"class-name\" orient=\"vertical\" id=\"range\" min=\"0\" max=\"255\" step=\"0\" onchange=\"motor1(this.value)\" value=\"0\"></center>");

This code below is the current button code. I need the below code to be used by the slider code above:

if (currentLine.endsWith("GET /MONFWD")) {
digitalWrite(MOTOR_A_ONE, HIGH);  // Establishes forward direction of Channel A
digitalWrite(MOTOR_A_TWO, HIGH);  // ENGAGE BRAKE
delay(1000);                      // DELAY BEFORE RELEASING BRAKE
digitalWrite(MOTOR_A_TWO, LOW);   // Disengage the Brake for Channel A
analogWrite(MOTOR_A_ENGAGE, 255); // Spins the motor forward on Channel A at full speed

Answer 1

Here's an example of slider that changes a Servo speed, In html page code you have to add this:

  <div class="slidecontainer">
  <input type="range" min="0" max="1023" value="512" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.onchange = function() {
  output.innerHTML = this.value;
  pwm_change(output.innerHTML);

}
function pwm_change(val) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "setPWM?PWMval="+val, true);
     xhttp.send();
}
</script>

In arduino you have to define handler like this:

void handle_pwm() {
 String  pwm_val = server.arg("PWMval"); // reading from slider on html pagae

 Serial.print("slider val: ");
 Serial.println(pwm_val);
int pwm_value = map(pwm_val.toInt(), 0, 1023, 0, 180); 
Servo.write(pwm_value);

server.send(200,"text/plane","0"); // handling the webpage update

}

And define servo and handler in Setup() section:

void setup(void){
....
Servo.attach(MotorPin,1000,2000);
server.on("/setPWM", handle_pwm);
....
 }