npmpackage.info

Gathering detailed insights and metrics for @sawyerclick/svelte-range-slider-pips

@sawyerclick/svelte-range-slider-pips - 2.2.0 | npmpackage.info

@sawyerclick/svelte-range-slider-pips

Multi-Thumb, Accessible, Beautiful Range Slider with Pips

2.2.0

495

MPL-2.0

TypeScript

224.94 kB

3.6

Installations

npm install @sawyerclick/svelte-range-slider-pips

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.19.1

NPM Version

8.19.3 Pull Requests

Open

0

Total

54

Closed

25

Merged

29

Issues

Open

2

Total

99

Closed

97

Releases

$state() reactivity improvements

4.0.4

Updated on Jun 23, 2025

Version 4

4.0.0

Updated on May 29, 2025

Limits Option

3.2.1

Updated on Feb 23, 2025

Fix Svelte 5 compatibility

3.1.4

Updated on Nov 04, 2024

Fix bundler / imports & Immutable

3.1.0

Updated on Aug 29, 2024

V3 🎉

3.0.0

Updated on Aug 28, 2024

View All 17 releases

Languages

TypeScript

Svelte

CSS

JavaScript

HTML

Vue

TypeScript (62.62%)

Svelte (27.69%)

CSS (7.14%)

JavaScript (1.37%)

HTML (0.81%)

Vue (0.38%)

Developer

simeydotme

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MPL-2.0 License

495 Stars

269 Commits

45 Forks

5 Watchers

2 Branches

8 Contributors

Updated on Jul 12, 2025

Maintainers

View All 8 Contributors

Package Meta Information

Latest Version

2.2.0

Package Id

@sawyerclick/svelte-range-slider-pips@2.2.0

Unpacked Size

224.94 kB

Size

44.61 kB

File Count

NPM Version

8.19.3

Node Version

16.19.1

Published on

Jun 06, 2023

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

@rollup/plugin-node-resolve rollup rollup-plugin-filesize rollup-plugin-svelte svelte

Range Slider (with pips)

Svelte Range Slider -- focussed, including some pips

A reactive, accessible, multi-thumb, range slider with the ability to display "pips" or "notches" along the range.
Importable as a svelte-component, or used directly in any javascript application.

📔	Docs	Full Documentation & Examples
📦	NPM	Node Module details
📝	REPL	Svelte component demo
❤	Codepen	Plain JS component demo

features

Features of the range slider plugin (written below)

✨ fully customisable, stylable & accessible
👍🏽 multi-thumb
🎚 range (min/max)
🏷 floating labels
📏 ruler notches
🏷 labels for notches
🧮 step function
🖍 formatter
🎭 animated

install

Open your project and use the command line to install the package;

1yarn add svelte-range-slider-pips --dev          # or
2npm install svelte-range-slider-pips --save-dev  # if you prefer npm

usage

in a svelte project

Assuming you have a Svelte app up and running;

1<script>
2  import RangeSlider from "svelte-range-slider-pips";
3</script>
4
5<RangeSlider values={[50]} pips />

as a regular JS file

If you're not building a svelte-app, you can use the /dist/ version of the script /dist/svelte-range-slider-pips.js and include it with a regular <script> tag. This should even work with jQuery.

1<script src="./js/vendor/svelte-range-slider-pips.js" />
2
3<div id="my-slider"></div>
4
5<script>
6  var mySlider = new RangeSliderPips({
7    target: document.querySelector("#my-slider"),
8    props: { values: [50], pips: true }
9  });
10</script>

as a JS module

If you're building a bleeding-edge JS application (maybe Vue or React), you might want to use js imports (import)

1import RangeSlider from "./node_modules/svelte-range-slider-pips/dist/svelte-range-slider-pips.mjs";
2
3var mySlider = new RangeSlider({
4  target: node, // js reference to a DOM element
5  props: { values: [50], pips: true }
6});

props (options)

slider props

prop	type	default	description
values	`Array`	`[50]`	Array of values to apply on the slider. Multiple values creates multiple handles. (note: A slider with `range` property set can only have two values max)
min	`Number`	`0`	Minimum value for the slider (should be `< max`)
max	`Number`	`100`	Maximum value for the slider (should be `> min`)
step	`Number`	`1`	Every `nth` value to allow handle to stop at (should be a positive value)
range	`Boolean`/`String`	`false`	Whether to style as a range picker. Use `range='min'` or `range='max'` for min/max variants
pushy	`Boolean`	`false`	If `range` is `true`, then this boolean decides if one handle will push the other along
float	`Boolean`	`false`	Set true to add a floating label above focussed handles
vertical	`Boolean`	`false`	Make the slider render vertically (lower value on bottom)
pips	`Boolean`	`false`	Whether to show pips/notches on the slider
pipstep	`Number`	`1`/`10`/`20`	Every `nth` step to show a pip for. This has multiple defaults depending on `values` property
first	`Boolean`/`String`	`false`	Whether to show a pip or label for the first value on slider. Use `first='label'` to show a label value
last	`Boolean`/`String`	`false`	Whether to show a pip or label for the last value on slider. Use `last='label'` to show a label value
rest	`Boolean`/`String`	`false`	Whether to show a pip or label for all other values. Use `rest='label'` to show a label value
all	`Boolean`/`String`	`false`	Whether to show a pip or label for all values. Same as combining `first`, `last` and `rest`. Use `all='label'` to show a label value
prefix	`String`	`""`	A string to prefix to all displayed values
suffix	`String`	`""`	A string to suffix to all displayed values
reversed	`Boolean`	`false`	Reverse the orientation of min/max
hoverable	`Boolean`	`true`	Whether hover styles are enabled for both handles and pips/values
disabled	`Boolean`	`false`	Determine if the slider is disabled, or enabled (only disables interactions, and events)
id	`String`	`""`	Give the slider a unique ID for use in styling
formatter	`Function`	`(v,i,p) => v`	A function to re-format values before they are displayed (`v = value, i = pip index, p = percent`)
handleFormatter	`Function`	`formatter`	A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index, p = percent`)
springValues	`Object`	`{ stiffness: 0.15, damping: 0.4 }`	Svelte spring physics object to change the behaviour of the handle when moving
slider	`Element`	`undefined`	DOM reference for binding to the main `<div />` of the component (`bind:slider='ref'`)

slider events (dispatched)

event	example	`event.detail`	description
start	`on:start={(e) => { ... }}`	`{ activeHandle: Integer, value: Float, values: Array }`	Event fired when the user begins interaction with the slider
change	`on:change={(e) => { ... }}`	`{ activeHandle: Integer, startValue: Float, previousValue: Float, value: Float, values: Array }`	Event fired when the user changes the value; returns the previous value, also
stop	`on:stop={(e) => { ... }}`	`{ activeHandle: Integer, startValue: Float, value: Float, values: Array }`	Event fired when the user stops interacting with slider; returns the beginning value, also

📔📘📖 Full Documentation & Examples

styling

Styling should mostly be done with CSS.
There's a bunch of css variables for controlling the colors of the elements. And the slider is fluid horizontally, with the size of things controlled by font-size. So you may change the font-size on the .rangeSlider base element to change the scale of everything.

If you require more fine control of the widths, heights, etc, then you may override the default css. This can be easier by using the id prop to give your slider a unique id.

Values of labels can be styled with CSS, and the format can be modified with the formatter() function prop. And animation of the handles is controlled by the springValues object prop.

contribute

I am very happy to accept;

🌟 suggestions/requests for new features or changes
🛠 pull-requests for bug fixes, or issue resolution
🧪 help with creating a proper test-suite

Read the CONTRIBUTING.md

support / donate

I'd be super excited if you find this project useful and wish to donate a small amount for my efforts!


		£1 GBP donation
		£5 GBP donation
		£10 GBP donation

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

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

SAST

Determines if the project uses static code analysis.

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

Security-Policy

Determines if the project has published a security policy.

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

39 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-mh2x-fcqh-fmqv
Warn: Project is vulnerable to: GHSA-rjjv-87mx-6x3h
Warn: Project is vulnerable to: GHSA-6q87-84jw-cjhp
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx

Score

3.6

/10

Last Scanned on 2025-07-07

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