https://github.com/ondras/custom-range

A stylable replacement for <input type=range>
https://github.com/ondras/custom-range

custom-elements

Last synced: about 2 months ago
JSON representation

A stylable replacement for <input type=range>

• Host: GitHub
• URL: https://github.com/ondras/custom-range
• Owner: ondras
• License: isc
• Created: 2019-04-30T07:56:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T23:04:49.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T19:36:21.673Z (3 months ago)
• Topics: custom-elements
• Language: JavaScript
• Homepage: https://jsfiddle.net/ondras/o1kpw6jy/
• Size: 31.3 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 

This is a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that mimics the native `` in a more styling-friendly way. It aims to offer the same HTML/JS API.

## Usage

Simply declare `` 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](https://github.com/ondras/x-range.git), using [npm](https://www.npmjs.com/package/custom-range) or linking via CDN.

```html

	

	

	

	

```

There is a [sample fiddle](https://jsfiddle.net/ondras/o1kpw6jy/) available.

## Browser support

No idea.

## Styling

Mostly via [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Here are the defaults:

```css

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;

}

```