DIYables Web Apps Web Slider
WebSlider Example - Setup Instructions
Overview
The WebSlider example provides two independent slider controls accessible through a web browser. Designed for Arduino Uno R4 WiFi and DIYables STEM V4 IoT educational platform with enhanced analog capabilities, precision control features, and built-in educational modules for learning PWM and analog electronics. Each slider offers values from 0-255, making them perfect for PWM control, brightness adjustment, motor speed control, and any application requiring analog-like control values.
Features
- Dual Sliders: Two independent slider controls (0-255 range each)
- Real-time Values: Instant value updates via WebSocket communication
- PWM Compatible: 8-bit values (0-255) perfect for analogWrite() functions
- Visual Feedback: Real-time value display for each slider
- Preset Buttons: Quick preset values for common configurations
- Touch & Mouse Support: Works on desktop, tablet, and mobile devices
- Responsive Design: Adapts to different screen sizes
- Value Persistence: Sliders remember last position when page reloads
- Platform Extensible: Currently implemented for Arduino Uno R4 WiFi, but can be extended for other hardware platforms. See DIYables_WebApps_ESP32
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Setup Instructions
Detailed Instructions
Follow these instructions step by step:
- If this is your first time using the Arduino Uno R4 WiFi/DIYables STEM V4 IoT, refer to the tutorial on setting up the environment for Arduino Uno R4 WiFi/DIYables STEM V4 IoT in the Arduino IDE.
- Connect the Arduino Uno R4/DIYables STEM V4 IoT board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate Arduino Uno R4 board (e.g., Arduino Uno R4 WiFi) and COM port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables WebApps", then find the DIYables WebApps library by DIYables
- Click Install button to install the library.
- You will be asked for installing some other library dependencies
- Click Install All button to install all library dependencies.
- On Arduino IDE, Go to File Examples DIYables WebApps WebSlider example, or copy the above code and paste it to the editor of Arduino IDE
/*
* DIYables WebApp Library - Web Slider Example
*
* This example demonstrates the Web Slider feature:
* - Two independent sliders (0-255)
* - Real-time value monitoring
* - Template for hardware control
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webslider
*/
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebSliderPage webSliderPage;
// Current slider values
int slider1Value = 64; // Default 25%
int slider2Value = 128; // Default 50%
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables WebApp - Web Slider Example");
// Add home and web slider pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// - Control brightness: strip.setBrightness(slider1);
// - Send values via Serial, I2C, SPI, etc.
});
// Set up callback for config requests (when client requests current values)
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value));
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: Add your main application code here
delay(10);
}
- Configure WiFi credentials in the code by updating these lines:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Click Upload button on Arduino IDE to upload code to Arduino UNO R4/DIYables STEM V4 IoT
- Open the Serial Monitor
- Check out the result on Serial Monitor. It looks like the below
COM6
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🎚️ Web Slider: http://192.168.0.2/web-slider
==========================================
Autoscroll
Clear output
9600 baud
Newline
- If you do not see anything, reboot Arduino board.
- Take note of the IP address displayed, and enter this address into the address bar of a web browser on your smartphone or PC.
- Example: http://192.168.0.2
- You will see the home page like below image:
- Click to the Web Slider link, you will see the Web Slider app's UI like the below:
- Or you can also access the page directly by IP address followed by /web-slider. For example: http://192.168.0.2/web-slider
- Try moving the two sliders to control analog values (0-255) and watch the real-time feedback in the Serial Monitor.
Creative Customization - Adapt the Code to Your Project
Set Default Slider Values
Configure initial slider positions:
// Current slider values (0-255)
int slider1Value = 64; // Default 25% (64/255)
int slider2Value = 128; // Default 50% (128/255)
How to Use the Sliders
Web Interface Controls
The slider interface provides:
- Slider 1: First control slider with value display (0-255)
- Slider 2: Second control slider with value display (0-255)
- Value Display: Real-time numeric values for both sliders
- Preset Buttons: Quick access to common values (0%, 25%, 50%, 75%, 100%)
Operating the Sliders
Desktop (Mouse Control)
- Click and Drag: Click on slider handle and drag to adjust value
- Click Position: Click anywhere on slider track to jump to that value
- Fine Control: Use small mouse movements for precise adjustment
Mobile/Tablet (Touch Control)
- Touch and Drag: Touch slider handle and drag to new position
- Tap Position: Tap on slider track to set value
- Smooth Control: Finger dragging provides smooth value changes
Value Ranges
Each slider provides:
- Minimum Value: 0 (0% - completely off)
- Maximum Value: 255 (100% - maximum intensity)
- Resolution: 256 discrete steps (8-bit precision)
- PWM Compatibility: Direct use with analogWrite() function
Programming Examples
Basic Slider Handler
void setup() {
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// Add your control logic here
});
}
LED Brightness Control
// Pin definitions for PWM LEDs
const int LED1_PIN = 9; // PWM pin for first LED
const int LED2_PIN = 10; // PWM pin for second LED
void setup() {
// Configure LED pins as outputs
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
// Set initial brightness
analogWrite(LED1_PIN, slider1Value);
analogWrite(LED2_PIN, slider2Value);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store values
slider1Value = slider1;
slider2Value = slider2;
// Control LED brightness directly (0-255 PWM)
analogWrite(LED1_PIN, slider1);
analogWrite(LED2_PIN, slider2);
Serial.println("LED1 Brightness: " + String(slider1) +
", LED2 Brightness: " + String(slider2));
});
}
Servo Position Control
#include <Servo.h>
Servo servo1, servo2;
void setup() {
// Attach servos to PWM pins
servo1.attach(9);
servo2.attach(10);
// Set initial positions
servo1.write(map(slider1Value, 0, 255, 0, 180));
servo2.write(map(slider2Value, 0, 255, 0, 180));
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Map slider values (0-255) to servo angles (0-180°)
int angle1 = map(slider1, 0, 255, 0, 180);
int angle2 = map(slider2, 0, 255, 0, 180);
// Move servos to calculated positions
servo1.write(angle1);
servo2.write(angle2);
Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°");
});
}
Motor Speed Control
// Motor driver pins
const int MOTOR1_PWM = 9; // Motor 1 speed control
const int MOTOR1_DIR1 = 2; // Motor 1 direction pin 1
const int MOTOR1_DIR2 = 3; // Motor 1 direction pin 2
const int MOTOR2_PWM = 10; // Motor 2 speed control
const int MOTOR2_DIR1 = 4; // Motor 2 direction pin 1
const int MOTOR2_DIR2 = 5; // Motor 2 direction pin 2
void setup() {
// Configure motor pins
pinMode(MOTOR1_PWM, OUTPUT);
pinMode(MOTOR1_DIR1, OUTPUT);
pinMode(MOTOR1_DIR2, OUTPUT);
pinMode(MOTOR2_PWM, OUTPUT);
pinMode(MOTOR2_DIR1, OUTPUT);
pinMode(MOTOR2_DIR2, OUTPUT);
// Set initial motor directions (forward)
digitalWrite(MOTOR1_DIR1, HIGH);
digitalWrite(MOTOR1_DIR2, LOW);
digitalWrite(MOTOR2_DIR1, HIGH);
digitalWrite(MOTOR2_DIR2, LOW);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control motor speeds directly
analogWrite(MOTOR1_PWM, slider1);
analogWrite(MOTOR2_PWM, slider2);
// Calculate percentage for display
int speed1Percent = map(slider1, 0, 255, 0, 100);
int speed2Percent = map(slider2, 0, 255, 0, 100);
Serial.println("Motor1: " + String(speed1Percent) + "%, " +
"Motor2: " + String(speed2Percent) + "%");
});
}
RGB LED Color Control
// RGB LED pins
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
void setup() {
pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use sliders to control RGB components
// Slider 1 controls red intensity
// Slider 2 controls blue intensity
// Green is calculated based on both sliders
int redValue = slider1;
int blueValue = slider2;
int greenValue = (slider1 + slider2) / 2; // Average of both sliders
analogWrite(RED_PIN, redValue);
analogWrite(GREEN_PIN, greenValue);
analogWrite(BLUE_PIN, blueValue);
Serial.println("RGB - R:" + String(redValue) +
" G:" + String(greenValue) +
" B:" + String(blueValue));
});
}
Advanced Programming Techniques
Value Smoothing
class SliderSmoother {
private:
int currentValue = 0;
int targetValue = 0;
unsigned long lastUpdate = 0;
const int SMOOTH_RATE = 5; // Change per update cycle
public:
void setTarget(int target) {
targetValue = target;
}
int getCurrentValue() {
return currentValue;
}
bool update() {
if (millis() - lastUpdate > 10) { // Update every 10ms
bool changed = false;
if (currentValue < targetValue) {
currentValue = min(currentValue + SMOOTH_RATE, targetValue);
changed = true;
} else if (currentValue > targetValue) {
currentValue = max(currentValue - SMOOTH_RATE, targetValue);
changed = true;
}
lastUpdate = millis();
return changed;
}
return false;
}
};
SliderSmoother smoother1, smoother2;
void setup() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Set target values for smooth transition
smoother1.setTarget(slider1);
smoother2.setTarget(slider2);
});
}
void loop() {
server.loop();
// Update smoothed values
bool changed1 = smoother1.update();
bool changed2 = smoother2.update();
if (changed1 || changed2) {
// Apply smoothed values to hardware
analogWrite(9, smoother1.getCurrentValue());
analogWrite(10, smoother2.getCurrentValue());
}
}
Threshold-Based Control
void setupThresholdControl() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Threshold-based control for discrete outputs
const int LOW_THRESHOLD = 85; // 33%
const int MEDIUM_THRESHOLD = 170; // 66%
// Control digital outputs based on slider 1 thresholds
if (slider1 < LOW_THRESHOLD) {
// Low level: Turn off all outputs
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else if (slider1 < MEDIUM_THRESHOLD) {
// Medium level: Turn on first output
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else {
// High level: Turn on all outputs
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}
// Use slider 2 for analog PWM control
analogWrite(9, slider2);
});
}
Preset Value System
// Predefined preset values
const int PRESETS[][2] = {
{0, 0}, // Preset 0: Both off
{64, 128}, // Preset 1: Low/Medium
{128, 128}, // Preset 2: Both medium
{255, 128}, // Preset 3: High/Medium
{255, 255} // Preset 4: Both maximum
};
void applyPreset(int presetNumber) {
if (presetNumber >= 0 && presetNumber < 5) {
slider1Value = PRESETS[presetNumber][0];
slider2Value = PRESETS[presetNumber][1];
// Update hardware
analogWrite(9, slider1Value);
analogWrite(10, slider2Value);
// Send updated values to web interface
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Applied preset " + String(presetNumber) +
": " + String(slider1Value) + ", " + String(slider2Value));
}
}
void setupPresetSystem() {
// You could trigger presets based on other inputs
// For example, reading digital pins for preset buttons
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Your normal slider handling
analogWrite(9, slider1);
analogWrite(10, slider2);
});
}
void loop() {
server.loop();
// Check for preset trigger conditions
// Example: Read buttons connected to digital pins
static bool lastButton = false;
bool currentButton = digitalRead(7); // Preset button on pin 7
if (currentButton && !lastButton) { // Button pressed
static int currentPreset = 0;
applyPreset(currentPreset);
currentPreset = (currentPreset + 1) % 5; // Cycle through presets
}
lastButton = currentButton;
}
Hardware Integration Examples
LED Strip Control
// For WS2812B or similar addressable LED strips
// (requires additional libraries like FastLED or Adafruit NeoPixel)
const int LED_STRIP_PIN = 6;
const int NUM_LEDS = 30;
void setupLEDStrip() {
// Initialize LED strip (depends on library used)
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Slider 1 controls brightness (0-255)
// Slider 2 controls color temperature or hue
uint8_t brightness = slider1;
uint8_t hue = slider2;
// Update LED strip (example with conceptual functions)
// strip.setBrightness(brightness);
// strip.fill(CHSV(hue, 255, 255));
// strip.show();
Serial.println("LED Strip - Brightness: " + String(brightness) +
", Hue: " + String(hue));
});
}
Fan Speed Control
const int FAN1_PIN = 9;
const int FAN2_PIN = 10;
void setupFanControl() {
pinMode(FAN1_PIN, OUTPUT);
pinMode(FAN2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control fan speeds with minimum threshold for startup
int fan1Speed = (slider1 > 50) ? map(slider1, 50, 255, 100, 255) : 0;
int fan2Speed = (slider2 > 50) ? map(slider2, 50, 255, 100, 255) : 0;
analogWrite(FAN1_PIN, fan1Speed);
analogWrite(FAN2_PIN, fan2Speed);
Serial.println("Fan1: " + String(map(fan1Speed, 0, 255, 0, 100)) + "%, " +
"Fan2: " + String(map(fan2Speed, 0, 255, 0, 100)) + "%");
});
}
Audio Volume Control
// For controlling audio amplifier or volume IC
const int VOLUME1_PIN = 9; // PWM output to volume control
const int VOLUME2_PIN = 10; // Second channel or tone control
void setupAudioControl() {
pinMode(VOLUME1_PIN, OUTPUT);
pinMode(VOLUME2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use logarithmic scaling for better audio perception
float volume1 = pow(slider1 / 255.0, 2) * 255; // Square law
float volume2 = pow(slider2 / 255.0, 2) * 255;
analogWrite(VOLUME1_PIN, (int)volume1);
analogWrite(VOLUME2_PIN, (int)volume2);
Serial.println("Volume1: " + String((int)volume1) +
", Volume2: " + String((int)volume2));
});
}
Troubleshooting
Common Issues
1. Sliders not responding
- Check WebSocket connection in browser console
- Verify network connectivity between device and Arduino
- Refresh browser page to reset connection
- Check Serial Monitor for connection errors
2. Values not reaching full range
- Verify slider range settings in web interface
- Check for value mapping issues in callback function
- Test with different browsers or devices
3. Jerky or inconsistent control
- Implement value smoothing for gradual changes
- Check for network latency issues
- Add debouncing for rapid value changes
4. PWM output not working
- Verify pins support PWM (check Arduino pinout)
- Ensure analogWrite() is called with correct pin numbers
- Check hardware connections and load requirements
Debug Tips
Add comprehensive debugging:
void debugSliderValues(int slider1, int slider2) {
Serial.println("=== Slider Debug ===");
Serial.println("Slider 1: " + String(slider1) + " (" + String(map(slider1, 0, 255, 0, 100)) + "%)");
Serial.println("Slider 2: " + String(slider2) + " (" + String(map(slider2, 0, 255, 0, 100)) + "%)");
Serial.println("PWM Pin 9: " + String(slider1));
Serial.println("PWM Pin 10: " + String(slider2));
Serial.println("===================");
}
Project Ideas
Lighting Control Projects
- Room lighting brightness control
- RGB color mixing interface
- LED strip animation speed control
- Stage lighting intensity control
Motor Control Projects
- Robot speed control
- Fan speed regulation
- Pump flow control
- Conveyor belt speed
Audio Projects
- Volume control interface
- Tone/equalizer control
- Sound effect intensity
- Music visualization control
Home Automation
- Climate control (heating/cooling intensity)
- Window blind position control
- Irrigation system flow control
- Smart device brightness/volume
Integration with Other Examples
Combine with WebJoystick
Use sliders for speed limits and joystick for direction:
// Global speed limit from sliders
int maxSpeed = 255;
// In WebSlider callback
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
maxSpeed = slider1; // Use slider 1 as global speed limit
});
// In WebJoystick callback
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Scale joystick values by slider-controlled speed limit
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Combine with WebDigitalPins
Use sliders to control PWM and digital pins for on/off:
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Only apply PWM if corresponding digital pins are ON
if (webDigitalPinsPage.getPinState(2)) {
analogWrite(9, slider1);
} else {
analogWrite(9, 0);
}
if (webDigitalPinsPage.getPinState(3)) {
analogWrite(10, slider2);
} else {
analogWrite(10, 0);
}
});
Next Steps
After mastering the WebSlider example, try:
- WebJoystick - For 2D directional control
- WebDigitalPins - For discrete on/off control
- WebMonitor - For debugging slider values
- MultipleWebApps - Combining sliders with other controls
Support
For additional help:
- Check the API Reference documentation
- Visit DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino community forums