Skip to content


Repository files navigation

This is a Custom Element that mimics the native <input type=range> in a more styling-friendly way. It aims to offer the same HTML/JS API.


Simply declare <x-range></x-range> within your HTML markup. You also need to include a script file (range.js) and a stylesheet file (range.css). Possible approaches include cloning the project, using npm or linking via CDN.

	<script src=></script>
	<link rel=stylesheet href= />

	<x-range min=10 max=50 step=5 value=20></x-range>

There is a sample fiddle available.

Browser support

No idea.


Mostly via CSS Custom Properties. Here are the defaults:

x-range {
	--thumb-size: 8px;
	--thumb-color: #fff;
	--thumb-shadow: #000;
	--thumb-hover-color: #ddd;

	--track-size: 4px;
	--track-color: #888;
	--track-shadow: #000;

	--elapsed-color: #ddd;

	--remaining-color: transparent;