Skip to content
A stylable replacement for <input type=range>
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
.gitignore
LICENSE.txt
Makefile
README.md
package-lock.json
package.json
range.css
range.js
range.less

README.md

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.

Usage

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.

<head>
	<script src=https://unpkg.com/custom-range@1/range.js></script>
	<link rel=stylesheet href=https://unpkg.com/custom-range@1/range.css />
</head>
<body>
	<x-range></x-range>

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

There is a sample fiddle available.

Browser support

No idea.

Styling

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;
}
You can’t perform that action at this time.