RSK World - Range Slider Component | Dual-Handle, Multi-Handle, Themes, Keyboard & Touch | RSK World

Dual & Multi Handle Scales & Presets Themes & Styling Keyboard & Touch Vanilla JS ES6

Range Slider Component is a customizable dual-handle range slider built with vanilla JavaScript ES6. Features: AdvancedRangeSlider (min/max/step, linear/logarithmic/exponential scale, 2 or 4+ handles, presets, valueFormat, onChange), RevolutionaryRangeSlider demos (AI, collaboration, physics, voice, ML, AR, blockchain, quantum). Includes config.js (storage, keyboard, toast), utils.js (debounce, storage, toast), localStorage persistence, keyboard shortcuts (?, R, Shift+R, E, Escape), toast and keyboard help overlay. Files: index.html, styles.css, script.js, config.js, utils.js, README.md, CHANGELOG.md. By rskworld.in.

If you find this Range Slider Component project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Range Slider Component

Slider Classes & Scales

AdvancedRangeSlider in script.js: min/max/step from data attributes or options, scale linear/logarithmic/exponential (percentageToValue, valueToPercentage). Handles 2 or 4+ with multiple slider-range segments. Snap to step or preset. valueFormat and onChange callback.

script.js: AdvancedRangeSlider, linearToValue, logarithmicToValue
percentageToValue / valueToPercentage by scale
snapToStep, snapToPreset for presets
updateRanges() for dual and multi-handle visuals

Project Structure & Files

range-slider/ with index.html (demo sections: Basic, Price, Custom, Multi, Log, Data, Comparison, Gesture, Snap, Audio, Theme, AI, Collaboration, Physics, Voice, ML, AR, Blockchain, Quantum), styles.css (track, handles, themes, toast, keyboard help, print), script.js (classes + initRangeSliders), config.js, utils.js, README.md, CHANGELOG.md. No build step.

range-slider/ – index.html, styles.css, script.js, config.js, utils.js, README.md, CHANGELOG.md
No build step – open index.html or static server
Segoe UI font
Zero dependencies; vanilla HTML, CSS, JavaScript ES6

Config & Persistence

config.js: RangeSliderConfig (storage key, debounceMs, keyboard shortcuts, toast duration). utils.js: debounce, getStorage/setStorage, showToast. Slider values saved to localStorage (debounced) and restored on load. Keyboard: ? help, R reset, Shift+R random, E export, Escape close help.

RangeSliderConfig.storage, .keyboard, .toast
saveState debounced; savedState applied on init
keyboard-help overlay (?)
range-slider-toast for reset notification

Demo Sections & Controls

Basic (0–100), Price (currency, $100 step), Custom (1–10, 0.5 step), Multi (4 handles), Logarithmic (1–1000), Data (histogram canvas), Comparison (3 sliders), Gesture, Preset snap, Audio, Theme (Default, Neon, Retro, Minimal, Cyberpunk). Ultimate Controls: Reset All, Random, Animate, Sync, Export/Import; checkboxes Haptic, Particles, 3D, AI, Quantum.

index.html: demo-section per slider type
Reset All, Random, Animate Demo, Sync All, Export/Import
Theme buttons and theme-slider setTheme()
Revolutionary sliders only created when DOM element exists

Pages & Demo

index.html: header, keyboard help dialog, multiple demo sections (Basic, Price, Custom, Multi, Log, Data, Comparison, Gesture, Snap, Audio, Theme, AI, Collaboration, Physics, Voice, ML, AR, Blockchain, Quantum), Ultimate Controls, footer. All sliders initialized in initRangeSliders(); button handlers attached only when slider exists.

index.html – all slider demos and control panel
script.js: initRangeSliders(), element-exists checks
Keyboard shortcuts and toast via config/utils
Accessibility: ARIA on handles, keyboard help, focus styles

What You Get

Static HTML/CSS/JS: range-slider/ folder with index.html, styles.css, script.js, config.js, utils.js, README.md, CHANGELOG.md. No build step. Open index.html or serve folder.

Complete source – range-slider/ with HTML, CSS, JS
No build step – open index.html or static server
README.md and CHANGELOG.md included
Technologies: HTML5, CSS3, Vanilla JS ES6. © 2026 RSK World.

Usage

Open index.html. Drag handles or click track; use keyboard (arrows, Home/End, Tab). Press ? for shortcuts; R reset, Shift+R random, E export. Try themes, presets, and optional features (audio, gestures, AI, etc.). Customize via CSS variables and options (valueFormat, onChange).

range-slider/index.html – main demo with all sliders
styles.css: track, range, handles, themes, toast, print
Accessibility: ARIA, keyboard, reduced motion
Author: RSK World | rskworld.in

Project Features

Dual-handle and multi-handle sliders, linear/logarithmic/exponential scales, preset snapping, 5 themes (Default, Neon, Retro, Minimal, Cyberpunk), keyboard shortcuts, touch support, localStorage persistence, toast and help overlay. Revolutionary demos: AI, collaboration, physics, voice, ML, AR, blockchain, quantum.

Sliders – dual/multi handle, scales, presets, valueFormat
Controls – reset, random, animate, sync, export/import
Config/utils – storage, keyboard, toast, debounce
A11y – ARIA, keyboard nav, focus, print styles

Credits & Acknowledgments

Range Slider Component by RSK World. Customizable dual-handle range slider with smooth interactions, themes, keyboard and touch support, and educational demos. Created by Molla Samser, designed and tested by Rima Khatun.

Range Slider Component – dual/multi handle, themes, persistence
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: info@rskworld.com | +91 93305 39277
© 2026 RSK World. All rights reserved.