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

Dependencies (0)

    Dev Dependencies (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