❤
npm
Sign UpSign In

custom-range

1.1.0 • Public • Published

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

Dependents (1)

Package Sidebar

Install

npm i custom-range

Repository

github.com/ondras/custom-range

Homepage

github.com/ondras/custom-range

Weekly Downloads

11

Version

1.1.0

License

ISC

Unpacked Size

10.3 kB

Total Files

8

Last publish

Collaborators

  • ondras
Try on RunKit
Report malware