npmpackage.info

Gathering detailed insights and metrics for range-slider-element

Other packages similar to range-slider-element

react-bootstrap-range-slider

3.0.8

A range slider component with tooltips for React Bootstrap that extends the HTML input (type=range) element.

@spectrum-web-components/slider

1.7.0

`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable.

range-slider-vertical-element

1.0.3

A customizable range slider element forked from https://github.com/andreruffert/range-slider-element

range-slider

1.0.2

A simple range slider UI element for use with browserify

Gathering detailed insights and metrics for range-slider-element

range-slider-element - 2.1.0 | npmpackage.info

range-slider-element

🎚 A cross browser customizable and accessible <range-slider> web component

2.1.0

MIT

JavaScript

26.07 kB

4.4

Installations

npm install range-slider-element

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.13.1

NPM Version

11.1.0 Pull Requests

Open

1

Total

179

Closed

96

Merged

82

Issues

Open

0

Total

6

Closed

6

Releases

v2.1.0

Updated on Jul 13, 2025

v2.0.0

Updated on Mar 05, 2025

View All 2 releases

Languages

JavaScript

HTML

CSS

TypeScript

JavaScript (60.48%)

HTML (29.62%)

CSS (8.32%)

TypeScript (1.57%)

Developer

andreruffert

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

81 Stars

233 Commits

5 Forks

5 Watchers

2 Branches

2 Contributors

Updated on Jul 16, 2025

Sponsor this package

https://github.com/andreruffert/range-slider-element?sponsor=1

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

range-slider-element@2.1.0

Unpacked Size

26.07 kB

Size

8.34 kB

File Count

NPM Version

11.1.0

Node Version

22.13.1

Published on

Jul 13, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@biomejs/biome @vitest/browser conventional-changelog-cli playwright typescript vite vitest

<range-slider> element

A cross browser customizable and accessible <range-slider> web component.

Features

Framework agnostic web component (no dependencies)
Cross browser customizable styling
Single and multi thumb
Horizontal and vertical orientations
Works like a built-in HTML form element (uses ElementInternals)
Keyboard accessible (use arrow keys)
Touch friendly
Follows the ARIA best practices guide on sliders

Install

Install via npm

1npm install range-slider-element

Usage

JavaScript

Import as ES module

1import 'range-slider-element';

Or via CDN

1<script type="module" src="https://cdn.jsdelivr.net/npm/range-slider-element@2/+esm"></script>

HTML

1<range-slider min="0" max="100" step="1" value="50"></range-slider>

CSS

Make sure to load the base styles exported via range-slider-element/style.css.

Or via CDN

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/range-slider-element@2/dist/range-slider-element.css">

Attributes

min The minimum permitted value. The default is 0.
max The maximum permitted value. The default is 100.
step The stepping interval. The default is 1.
value The value. The default is min + (max - min) / 2.
dir Directionality. The default is ltr. Allowed options rtl.
orientation The default is horizontal. Allowed options vertical.

Styling

CSS custom properties

Exposed CSS custom properties scoped within the range-slider element.

--track-size - The track size. The default is 0.2rem. Can be overwritten for customization.
--thumb-size - The thumb size. The default is 1.2rem. Can be overwritten for customization.

DOM selectors

1range-slider {}
2range-slider [data-track] {}
3range-slider [data-track-fill] {}
4range-slider [data-thumb] {}
5
6/* Advanced customization */
7range-slider [data-runnable-track] {}

For examples of how to customize the default styling, check out the docs.

Events

input - Pointer move, value changed. Bubbles.
change - Pointer up, key up, value changed. Bubbles.

Examples

For examples checkout the CodePen <range-slider> collection.

License

Distributed under the MIT license. See LICENSE for details.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.4

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More