npmpackage.info

mm-jsr

Range input solution without dependencies

3.0.2

LGPL-3.0

TypeScript

75.26 kB

54,209 2.8

Installations

npm install mm-jsr

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.14.2

NPM Version

8.5.0 Score

73.3

Supply Chain

98.9

Quality

Maintenance

100

Vulnerability

81.3

License

Pull Requests

Open

2

Total

62

Closed

11

Merged

49

Issues

Open

10

Total

77

Closed

67

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 5 contributors

Languages

TypeScript

Svelte

HTML

JavaScript

CSS

TypeScript (61.37%)

Svelte (20.52%)

HTML (6.96%)

JavaScript (5.79%)

CSS (5.36%)

Developer

soanvig

Download Statistics

Total Downloads

54,209

Last Day

Last Week

Last Month

411

Last Year

8,926

GitHub Statistics

56 Stars

512 Commits

16 Forks

5 Watching

4 Branches

5 Contributors

Maintainers

Package Meta Information

Latest Version

3.0.2

Package Id

mm-jsr@3.0.2

Unpacked Size

75.26 kB

Size

26.32 kB

File Count

NPM Version

8.5.0

Node Version

16.14.2

Total Downloads

Cumulative downloads

Total Downloads

54,209

Last day

-42.9%

Compared to previous day

Last week

-53.6%

Compared to previous week

Last month

-38.4%

411

Compared to previous month

Last year

-35.1%

8,926

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@rollup/plugin-node-resolve @rollup/plugin-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @zerollup/ts-transform-paths ava browser-env cross-env eslint eslint-plugin-import-quotes rollup rollup-plugin-terser serve ts-node tslib ttypescript typedoc typescript

Versions

mm-jsr

mm-jsr provides You with excellent solution for creating so-called range-inputs.

Homepage and demo: https://soanvig.github.io/mm-jsr/

Information

Range input is form's field where one can choose a value from min-max range. Although HTML 5 comes with input[type="range"] its functionality lacks a lot of features. mm-jsr gives You anything You may need.

Browser support: Firefox, Chrome (and Chromium forks, like: Brave, Edge, Opera, Vivaldi)

LGPLv3 license doubts are explained here

For framework adapters see: adapters section

Features

screen responsivity,
custom minimum and maximum values (including negative numbers),
custom step of values (literally custom, it can be 0.001, 2 or 100),
any number of sliders,
collapsing labels,
fully and easily customizable through CSS and configuration,
support for touch devices,
support for keyboard,
and other!

Advantages

lightweight (~18kB of minified, ~5kB of gzipped code),
performant,
customizable,
no dependencies,
easy to wrap with UI library (React, Vue, Angular, Svelte, etc.) - see adapters section

Quick-start

Install

npm install --save mm-jsr

or

yarn add mm-jsr

Include

import { JSR } from 'mm-jsr';

or

const { JSR } = require('mm-jsr');

or

<script src="https://unpkg.com/mm-jsr/build/index.js"></script>
(which makes variable JSR available globally - REMEMBER to lock the version by suffixing address with @version e.g.
https://unpkg.com/mm-jsr/build/index.js@2.1.0)

Add CSS (you can use basic styles from here)
Instantiate JSR

1  // NOTE: for unpkg skip import, and use `window.JSR.JSR`/`window.JSR.ModuleXXX`
2  import { JSR, ModuleRail, ModuleSlider, ModuleBar, ModuleLabel, ModuleLimit } from 'mm-jsr';
3
4  const jsr = new JSR({
5    modules: [
6      new ModuleLimit({
7        min: 15,
8        max: 90,
9      }),
10      new ModuleRail(),
11      new ModuleSlider(),
12      new ModuleBar(),
13      new ModuleLabel(),
14    ],
15    config: {
16      min: 0,
17      max: 100,
18      step: 0.01,
19      initialValues: [25, 50, 75],
20      container: document.getElementById('jsr'),
21    }
22  });

Configuration and API

See docs

Adapters

JSR supports official adapters/implementation guides:

React
Svelte

Important notes

Locking screen on touchevent

Touch event on mobile devices is supported by JSR. Because moving the finger around the screen to move slider caused the view to go up and down, I decided to lock the screen on touch start. This means, that to document root .jsr_lockscreen class is applied, which sets the size of document root to window size. If it causes any problems, You can set overflow: visible; width: auto; height: auto; on .jsr_lockscreen class (or just remove this class from code), and report the issue through GitHub's issue system.

Known issues:

it may cause screen jump on mobile screens, because after locking screen the top address bar may disappear.

Keyboard support

JSR supports keyboard control. First of all one of sliders needs to be focused (by TAB or by click).

By clicking left/right arrow the value is changed by options.step.
If the CTRL is pressed along with arrow, the value is changed by options.step x10.
If the SHIFT is pressed along with arrow, the value is changed by range x5% (by the 5% of whole range).

NOTE: In case of SHIFT and CTRL keys pressed simultaneously, SHIFT takes priority.

Modules

Modules are HTML elements rendered into JSR container. They provide HTML representation of JSR state or config, and allow to provide input back to JSR state. Also, they can manipulate state values. All modules are optional. The most basic slider is built of Slider and Rail modules.

name	description	invocation	options
slider	moveable dots/points	new JSR.Slider()	docs
rail	horizontal clickable bar behind sliders	new JSR.Rail()	docs
bar	moveable bar between sliders (moving adjacent sliders)	new JSR.Bar()	docs
label	moveable labels beneath sliders	new JSR.Label(options)	docs
grid	vertical bar beneath sliders	new JSR.Grid(options)	docs
limit	visual representation of limit configuration (needs to be first in the list of modules)	new JSR.Limit(options)	docs

If You don't see a module here, that suits your case, You can create one by yourself. Modules created that way are applicable via configuration option, so You don't have to make changes to library code.

You may want to see ./CONTRIBUTING.md for more information about creating new modules.

License explanation

mm-jsr uses LGPLv3 license. It means, that You can:

use library in closed-source projects
redistribute the code (preserving authorship)
make changes to the code

However, if you decide to make changes to the library code, You has to publish them under LGPLv3 license. This way library legally always stays open source and free.

The best way to make changes is to create public fork of the library.

If You don't plan to add any malicious behaviour to the library, this license should not be harmful for You in any way.

It is also expected, that any plugins (extensions or modules) added to library via configuration, are respecting final user freedom, and are not spying on his actions performed over such module without his knowledge and approval.

Migration guide: v2 -> v3

Accidentally in v2.2.2 breaking change was introduced which changed exports from package. Please use import { JSR, ModuleRail, ModuleXXX } from 'mm-jsr or window.JSR.JSR/window.JSR.ModuleXXX (for unpkg import).
Cannot configure limit through options. Limit module is now required to do it. Also, it has to be first in the list.

Migration guide: v1 -> v2

Basically You need to implement it from the ground up.

CSS are similar, but differ in details: basically because HTML is different (flat, not nested).

JSR instance API is completely different, although features are almost the same (v2 should contain most of the v1 features).

Contributing

See CONTRIBUTING.md for information about how to contribute and current contributors.

No vulnerabilities found.

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.

0

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

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

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-jsr.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-react.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-react.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/pr-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-jsr.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-jsr.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-react.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-react.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/release-react.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/size-limit.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/size-limit.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webpage.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/webpage.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/webpage.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/soanvig/mm-jsr/webpage.yml/master?enable=pin
Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2024-12-16

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

Other packages similar to mm-jsr

react-mm-jsr

2.0.4

React adapter to pure JS range input solution