Interactive HTML Canvas Gauge with Range Slider
This example makes the Canvas gauge interactive. Move the native range control to change the data value and redraw the pointer immediately. No jQuery UI slider is required.
Use a native range input Top ↑
const slider = document.getElementById('gauge_value');
slider.addEventListener('input', drawGauge);A native <input type="range"> works without jQuery UI and supports keyboard interaction. The original Plus2net page used a jQuery UI slider; that remains useful as a legacy comparison.
Clear and redraw when the value changes Top ↑
function drawGauge() {
const value = Number(slider.value);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const angle = Math.PI + (value / maxValue) * Math.PI;
// draw arc and pointer using the new angle
}Accessibility Top ↑
Keep the range input labelled and expose the selected number through an <output> or nearby text. Do not make the Canvas graphic the only place where the value appears.
Frequently asked questions Top ↑
Which range-input event should I use?
input updates continuously while the slider moves; change is better when you only need the committed value.
Is jQuery UI required?
No. Native range inputs are sufficient for this demo.
Why clear the Canvas first?
Canvas is immediate-mode graphics, so previous pixels remain until you erase or redraw them.
Can the maximum be changed?
Yes. Keep the slider maximum and the gauge calculation in sync.
Can the pointer transition smoothly?
Yes. Animate between values with requestAnimationFrame().
Gauge chart basics | Pie chart | Canvas reference
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
