Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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;
}

About

A stylable replacement for <input type=range>

Topics

Resources

License

Releases

No releases published

Sponsor this project

 

Packages

No packages published