The Bluetooth Slider example provides two independent slider controls accessible through the DIYables Bluetooth STEM app. Designed for ESP32 boards with support for both BLE (Bluetooth Low Energy) and Classic Bluetooth connections. Each slider offers values from 0-100, making them perfect for PWM control, brightness adjustment, motor speed control, and any application requiring analog-like control values.
This example supports two Bluetooth modes:
ESP32 BLE (Bluetooth Low Energy): Works on both Android and iOS
ESP32 Classic Bluetooth: Works on Android only. iOS does not support Classic Bluetooth. Use BLE if you need iOS support.
Features
Dual Sliders: Two independent slider controls (0-100 range each)
Real-time Values: Instant value updates via Bluetooth communication
PWM Compatible: Values (0-100) easily mapped to analogWrite() functions
Visual Feedback: Real-time value display for each slider in the app
BLE & Classic Bluetooth: Choose the Bluetooth mode that suits your project
Cross-Platform: BLE mode works on both Android and iOS; Classic Bluetooth works on Android
Low Power Option: BLE mode consumes less power than Classic Bluetooth
Configurable Range & Step: Customize slider range and step size at runtime
Disclosure: Some of the links in this section are Amazon affiliate links, meaning we may earn a commission at no additional cost to you if you make a purchase through them. Additionally, some links direct you to products from our own brand, DIYables .
Connect the ESP32 board to your computer using a USB cable.
Launch the Arduino IDE on your computer.
Select the appropriate ESP32 board and COM port.
Navigate to the Libraries icon on the left bar of the Arduino IDE.
Search "DIYables Bluetooth", then find the DIYables Bluetooth 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.
Choose one of the two Bluetooth modes below depending on your needs:
ESP32 Classic Bluetooth Code (works with app on Android only)
Note: Classic Bluetooth is NOT supported on iOS. If you need iOS support, use the BLE code below.
On Arduino IDE, Go to File Examples DIYables Bluetooth Esp32Bluetooth_Slider example, or copy the above code and paste it to the editor of Arduino IDE
/* * DIYables Bluetooth Library - ESP32 Classic Bluetooth Slider Example * Works with DIYables Bluetooth STEM app on Android * Note: Classic Bluetooth is NOT supported on iOS. Use BLE examples for iOS support. * * This example demonstrates the Bluetooth Slider feature: * - Control values using sliders (0-100) * - Support for dual sliders * - Configurable range and step * * Compatible Boards: * - ESP32 (all variants with Classic Bluetooth) * - ESP32-WROOM-32 * - ESP32-DevKitC * - ESP32-WROVER * * Note: Select "Huge APP (3MB No OTA/1MB SPIFFS)" partition scheme * in Arduino IDE: Tools > Partition Scheme * * Setup: * 1. Upload the sketch to your ESP32 * 2. Open Serial Monitor (115200 baud) to see connection status * 3. Use DIYables Bluetooth App to connect and control sliders * * Tutorial: https://diyables.io/bluetooth-app * Author: DIYables */#include <DIYables_BluetoothServer.h>#include <DIYables_BluetoothSlider.h>#include <platforms/DIYables_Esp32Bluetooth.h>// Create Bluetooth instancesDIYables_Esp32Bluetooth bluetooth("ESP32_Slider");DIYables_BluetoothServer bluetoothServer(bluetooth);// Create Slider app instance (min=0, max=100, step=1)DIYables_BluetoothSlider bluetoothSlider(0, 100, 1);// Variables to store current slider valuesint currentSlider1 = 0;int currentSlider2 = 0;// PWM output pins (for LED brightness control example)constint PWM_PIN_1 = 16;constint PWM_PIN_2 = 17;// ESP32 LEDC PWM channelsconstint PWM_CHANNEL_1 = 0;constint PWM_CHANNEL_2 = 1;voidsetup() {Serial.begin(115200);delay(1000);Serial.println("DIYables Bluetooth - ESP32 Slider Example");// Initialize PWM using ESP32 LEDC ledcSetup(PWM_CHANNEL_1, 5000, 8); // 5kHz, 8-bit resolution ledcSetup(PWM_CHANNEL_2, 5000, 8); ledcAttachPin(PWM_PIN_1, PWM_CHANNEL_1); ledcAttachPin(PWM_PIN_2, PWM_CHANNEL_2);// Initialize Bluetooth server with platform-specific implementation bluetoothServer.begin();// Add slider app to server bluetoothServer.addApp(&bluetoothSlider);// Set up connection event callbacks bluetoothServer.setOnConnected([]() {Serial.println("Bluetooth connected!");// Send initial slider positions bluetoothSlider.send(currentSlider1, currentSlider2); }); bluetoothServer.setOnDisconnected([]() {Serial.println("Bluetooth disconnected!"); });// Set up slider callback for value changes bluetoothSlider.onSliderValue([](int slider1, int slider2) {// Store the received values currentSlider1 = slider1; currentSlider2 = slider2;// Print slider values (0-100)Serial.print("Slider 1: ");Serial.print(slider1);Serial.print(", Slider 2: ");Serial.println(slider2);// Map slider values (0-100) to PWM range (0-255)int pwm1 = map(slider1, 0, 100, 0, 255);int pwm2 = map(slider2, 0, 100, 0, 255);// Control LED brightness using ESP32 LEDC ledcWrite(PWM_CHANNEL_1, pwm1); ledcWrite(PWM_CHANNEL_2, pwm2);// TODO: Add your control logic here based on slider values// Examples:// - Servo control: myServo.write(map(slider1, 0, 100, 0, 180));// - Motor speed: ledcWrite(MOTOR_CHANNEL, pwm1);// - Volume control: setVolume(slider1);// - Brightness control: setBrightness(slider2); });// Optional: Handle requests for current slider values (when app loads) bluetoothSlider.onGetConfig([]() {// Send the stored slider values back to the app bluetoothSlider.send(currentSlider1, currentSlider2);Serial.print("App requested values - Sent: Slider1=");Serial.print(currentSlider1);Serial.print(", Slider2=");Serial.println(currentSlider2); });// You can change slider configuration at runtime:// bluetoothSlider.setRange(0, 255); // Change range to 0-255// bluetoothSlider.setStep(5); // Change step to 5 (coarser control)Serial.println("Waiting for Bluetooth connection...");}voidloop() {// Handle Bluetooth server communications bluetoothServer.loop();delay(10);}
Click Upload button on Arduino IDE to upload code to ESP32
Open the Serial Monitor
Check out the result on Serial Monitor. It looks like the below:
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32 Dev Module
Newbiely.ino
···
8Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
DIYables Bluetooth - ESP32 Slider Example
Waiting for Bluetooth connection...
Ln 11, Col 1
ESP32 Dev Module on COM15
2
ESP32 BLE Code (works with app on both Android and iOS)
On Arduino IDE, Go to File Examples DIYables Bluetooth Esp32BLE_Slider example, or copy the above code and paste it to the editor of Arduino IDE
/* * DIYables Bluetooth Library - ESP32 BLE Slider Example * Works with DIYables Bluetooth STEM app on Android and iOS * * This example demonstrates the Bluetooth Slider feature: * - Control values using sliders (0-100) * - Support for dual sliders * - Configurable range and step * * Compatible Boards: * - ESP32-WROOM-32 * - ESP32-DevKitC * - ESP32-WROVER * - ESP32-S3 * - ESP32-C3 * - Any ESP32 board supporting BLE * * Note: Select "Huge APP (3MB No OTA/1MB SPIFFS)" partition scheme * in Arduino IDE: Tools > Partition Scheme * * Setup: * 1. Upload the sketch to your ESP32 * 2. Open Serial Monitor (115200 baud) to see connection status * 3. Use DIYables Bluetooth App to connect and control sliders * * Tutorial: https://diyables.io/bluetooth-app * Author: DIYables */#include <DIYables_BluetoothServer.h>#include <DIYables_BluetoothSlider.h>#include <platforms/DIYables_Esp32BLE.h>// BLE Configurationconst char* DEVICE_NAME = "ESP32BLE_Slider";const char* SERVICE_UUID = "19B10000-E8F2-537E-4F6C-D104768A1214";const char* TX_UUID = "19B10001-E8F2-537E-4F6C-D104768A1214";const char* RX_UUID = "19B10002-E8F2-537E-4F6C-D104768A1214";// Create Bluetooth instancesDIYables_Esp32BLE bluetooth(DEVICE_NAME, SERVICE_UUID, TX_UUID, RX_UUID);DIYables_BluetoothServer bluetoothServer(bluetooth);// Create Slider app instance (min=0, max=100, step=1)DIYables_BluetoothSlider bluetoothSlider(0, 100, 1);// Variables to store current slider valuesint currentSlider1 = 0;int currentSlider2 = 0;// PWM output pinsconstint PWM_PIN_1 = 16;constint PWM_PIN_2 = 17;voidsetup() {Serial.begin(115200);delay(1000);Serial.println("DIYables Bluetooth - ESP32 BLE Slider Example");// Initialize PWM pinspinMode(PWM_PIN_1, OUTPUT);pinMode(PWM_PIN_2, OUTPUT);// Initialize Bluetooth server with platform-specific implementation bluetoothServer.begin();// Add slider app to server bluetoothServer.addApp(&bluetoothSlider);// Set up connection event callbacks bluetoothServer.setOnConnected([]() {Serial.println("Bluetooth connected!"); bluetoothSlider.send(currentSlider1, currentSlider2); }); bluetoothServer.setOnDisconnected([]() {Serial.println("Bluetooth disconnected!"); });// Set up slider callback for value changes bluetoothSlider.onSliderValue([](int slider1, int slider2) { currentSlider1 = slider1; currentSlider2 = slider2;Serial.print("Slider 1: ");Serial.print(slider1);Serial.print(", Slider 2: ");Serial.println(slider2);// Map slider values (0-100) to PWM range (0-255)int pwm1 = map(slider1, 0, 100, 0, 255);int pwm2 = map(slider2, 0, 100, 0, 255);analogWrite(PWM_PIN_1, pwm1);analogWrite(PWM_PIN_2, pwm2);// TODO: Add your control logic here }); bluetoothSlider.onGetConfig([]() { bluetoothSlider.send(currentSlider1, currentSlider2);Serial.print("App requested values - Sent: Slider1=");Serial.print(currentSlider1);Serial.print(", Slider2=");Serial.println(currentSlider2); });Serial.println("Waiting for Bluetooth connection...");}voidloop() { bluetoothServer.loop();delay(10);}
Click Upload button on Arduino IDE to upload code to ESP32
Open the Serial Monitor
Check out the result on Serial Monitor. It looks like the below:
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32 Dev Module
Newbiely.ino
···
8Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
DIYables Bluetooth - ESP32 BLE Slider Example
Waiting for Bluetooth connection...
Ln 11, Col 1
ESP32 Dev Module on COM15
2
Mobile App
Install the DIYables Bluetooth App on your smartphone: Android | iOS
If you are using the ESP32 Classic Bluetooth code, you need to pair the ESP32 with your Android phone before opening the app:
Go to your phone's Settings > Bluetooth
Make sure Bluetooth is turned on
Your phone will scan for available devices
Find and tap "ESP32_Slider" in the list of available devices
Confirm the pairing request (no PIN required)
Wait until it shows "Paired" under the device name
If you are using the ESP32 BLE code, no pairing is needed. Just proceed to the next step.
Open the DIYables Bluetooth App
When opening the app for the first time, it will ask for permissions. Please grant the following:
Nearby Devices permission (Android 12+) / Bluetooth permission (iOS) - required to scan and connect to Bluetooth devices
Location permission (Android 11 and below only) - required by older Android versions to scan for BLE devices
Make sure Bluetooth is turned on on your phone
On the home screen, tap the Connect button. The app will scan for both BLE and Classic Bluetooth devices.
Find and tap your device in the scan results to connect:
For Classic Bluetooth: tap "ESP32_Slider"
For BLE: tap "ESP32BLE_Slider"
Once connected, the app automatically goes back to the home screen. Select the Slider app from the app menu.
Note: You can tap the settings icon on the home screen to hide/show apps on the home screen. For more details, see the DIYables Bluetooth App User Manual.
Move the two sliders to control PWM values (0-100)
Now look back at the Serial Monitor on Arduino IDE. You will see:
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32 Dev Module
Newbiely.ino
···
8Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
// Create Slider app instance with custom range (min=0, max=255, step=5)DIYables_BluetoothSlider bluetoothSlider(0, 255, 5);// Or change at runtime:bluetoothSlider.setRange(0, 255); // Change range to 0-255bluetoothSlider.setStep(5); // Change step to 5 (coarser control)// Read current configuration:int currentMin = bluetoothSlider.getMin(); // Get current minimum valueint currentMax = bluetoothSlider.getMax(); // Get current maximum valueint currentStep = bluetoothSlider.getStep(); // Get current step value
Handle Configuration Request from App
When the app connects and opens the Slider screen, it requests the slider configuration from ESP32. You can use the onGetConfig() callback to send the current slider values to the app at that moment:
bluetoothSlider.onGetConfig([]() {// This is called when the app requests slider configuration// Send current slider values so the app displays them correctly bluetoothSlider.send(currentSlider1, currentSlider2);Serial.println("App requested config - sent current values");});
Send Values to App
You can send slider values from ESP32 to the app (e.g., to update the app's slider positions):
// Send both slider values to the appbluetoothSlider.send(currentSlider1, currentSlider2);// Send a single value (applied to both sliders)bluetoothSlider.send(50);
Handle Connection Events
You can detect when the app connects or disconnects from the ESP32:
// Called when the app connects to ESP32bluetoothServer.setOnConnected([]() {Serial.println("Bluetooth connected!");// Send current slider values to the app bluetoothSlider.send(currentSlider1, currentSlider2);});// Called when the app disconnects from ESP32bluetoothServer.setOnDisconnected([]() {Serial.println("Bluetooth disconnected!");// Optional: stop motors, reset outputs, etc.});// Check connection status anywhere in your codeif (bluetoothServer.isConnected()) {// Do something only when connected}
How to Use the Sliders
App Interface Controls
The slider interface in the DIYables Bluetooth App provides:
Slider 1: First control slider with value display
Slider 2: Second control slider with value display
Value Display: Real-time numeric values for both sliders
Value Ranges
Each slider provides:
Default Range: 0 to 100
Configurable: Range and step can be customized in code
PWM Mapping: Easy mapping to 0-255 for analogWrite()
Programming Examples
Basic Slider Handler
voidsetup() {// Set up slider callback for value changes bluetoothSlider.onSliderValue([](int slider1, int slider2) {// Store the received values currentSlider1 = slider1; currentSlider2 = slider2;// Print slider valuesSerial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));// Add your control logic here });}
void setupThresholdControl() { bluetoothSlider.onSliderValue([](int slider1, int slider2) { currentSlider1 = slider1; currentSlider2 = slider2;// Threshold-based control for discrete outputsconstint LOW_THRESHOLD = 33;constint MEDIUM_THRESHOLD = 66;// Control digital outputs based on slider 1 thresholdsif (slider1 < LOW_THRESHOLD) {// Low level: Turn off all outputsdigitalWrite(18, LOW);digitalWrite(19, LOW);digitalWrite(21, LOW); } elseif (slider1 < MEDIUM_THRESHOLD) {// Medium level: Turn on first outputdigitalWrite(18, HIGH);digitalWrite(19, LOW);digitalWrite(21, LOW); } else {// High level: Turn on all outputsdigitalWrite(18, HIGH);digitalWrite(19, HIGH);digitalWrite(21, HIGH); }// Use slider 2 for analog PWM controlanalogWrite(16, map(slider2, 0, 100, 0, 255)); });}
Wireless climate control (heating/cooling intensity)
Bluetooth window blind position control
Irrigation system flow control
Integration with Other Bluetooth Apps
Combine with Bluetooth Joystick
Use sliders for speed limits and joystick for direction:
// Global speed limit from slidersintmaxSpeed = 100;// In Bluetooth Slider callbackbluetoothSlider.onSliderValue([](int slider1, int slider2) {maxSpeed = slider1; // Use slider 1 as global speed limit});// In Bluetooth Joystick callbackbluetoothJoystick.onJoystickValue([](int x, int y) {// Scale joystick values by slider-controlled speed limitint scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed); controlRobot(scaledX, scaledY);});
Combine with Bluetooth Digital Pins
Use sliders to control PWM and digital pins for on/off:
bluetoothSlider.onSliderValue([](int slider1, int slider2) {// Only apply PWM if corresponding digital pins are ONif (digitalRead(18) == HIGH) {analogWrite(16, map(slider1, 0, 100, 0, 255)); } else {analogWrite(16, 0); }if (digitalRead(19) == HIGH) {analogWrite(17, map(slider2, 0, 100, 0, 255)); } else {analogWrite(17, 0); }});
Next Steps
After mastering the Bluetooth Slider example, try:
Bluetooth Joystick - For 2D directional control
Bluetooth Digital Pins - For discrete on/off control
Bluetooth Monitor - For debugging slider values
Multiple Bluetooth Apps - Combining sliders with other controls
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!