js-rangeslider
Advanced tools
js-rangeslider - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
| { | ||
| "name": "js-rangeslider", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "A vanilla js range Slider utility handling dual inputs", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "build": "npm run build:js && npm run build:css", | ||
| "build:js": "npm run compile-js && npm run minify-js", | ||
| "build:css": "npm run compile-scss && npm run minify-css", | ||
| "compile-js": "babel ./src/index.js --out-file=./dist/rangeslider.js --presets=@babel/preset-env", | ||
| "compile-js-watch": "babel ./src/index.js --out-file=./dist/rangeslider.js --presets=@babel/preset-env --watch", | ||
| "compile-scss": "sass --no-source-map ./src/index.scss ./dist/rangeslider.css", | ||
| "minify-js": "minify ./dist/rangeslider.js --outFile=./dist/rangeslider.min.js", | ||
| "minify-css": "sass --no-source-map --style=compressed ./src/index.scss ./dist/rangeslider.min.css" | ||
| "build": "webpack --config webpack.config.js" | ||
| }, | ||
@@ -27,2 +20,5 @@ "repository": { | ||
| ], | ||
| "browserslist": [ | ||
| ">.25%, not dead" | ||
| ], | ||
| "author": "David Giesemann", | ||
@@ -35,8 +31,10 @@ "license": "ISC", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.19.3", | ||
| "@babel/core": "^7.19.3", | ||
| "@babel/preset-env": "^7.19.3", | ||
| "babel-minify": "^0.5.2", | ||
| "sass": "^1.55.0" | ||
| "babel-loader": "^8.2.5", | ||
| "css-loader": "^6.7.1", | ||
| "mini-css-extract-plugin": "^2.6.1", | ||
| "sass": "^1.55.0", | ||
| "sass-loader": "^13.0.2", | ||
| "webpack": "^5.74.0", | ||
| "webpack-cli": "^4.10.0" | ||
| } | ||
| } |
103
README.md
| # RangeSlider | ||
| ... documentation yet to come.. | ||
| ## Installation | ||
| npm install js-rangeslider | ||
| ## Usage | ||
| Add HTML-Elements of class "rangeSlider" to your markup first: | ||
| <div class="rangeSlider" data-min="0" data-max="100" data-step="1" data-vmin="20" data-vmax="80"></div> | ||
| Import rangeSlider as needed: | ||
| import Styles from "js-rangeslider/src/js-rangeslider" | ||
| import RangeSlider from "js-rangeslider/src/js-rangeslider" | ||
| new RangeSlider(document.querySelector(".rangeSlider")) | ||
| If you want to override the default styling, use scss to override the default values before importing: | ||
| // custom-rangeslider-styles.scss | ||
| $barBackground: #dedede; | ||
| $handleBackground: #444444; | ||
| $progressBackground: #c00; | ||
| @import "js-rangeslider/src/js-rangeslider"; | ||
| ## Options | ||
| Initialize your rangeSlider using an Object with some or all of these options: | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>min</td> | ||
| <td>Number</td> | ||
| <td>0</td> | ||
| <td>The absolute minimum of your rangeSlider</td> | ||
| </tr> | ||
| <tr> | ||
| <td>max</td> | ||
| <td>Number</td> | ||
| <td>100</td> | ||
| <td>The absolute maximum of your rangeSlider</td> | ||
| </tr> | ||
| <tr> | ||
| <td>minInputName</td> | ||
| <td>String</td></td> | ||
| <td>"min"</td></td> | ||
| <td>The name of the input holding the minimum-value, might be important when using server-side input-processing</td> | ||
| </tr> | ||
| <tr> | ||
| <td>maxInputName</td> | ||
| <td>String</td> | ||
| <td>"max"</td> | ||
| <td>The name of the input holding the maximum-value, might be important when using server-side input-processing</td> | ||
| </tr> | ||
| <tr> | ||
| <td>minInputValue</td> | ||
| <td>Number</td> | ||
| <td>0</td> | ||
| <td>The current minimum-value</td> | ||
| </tr> | ||
| <tr> | ||
| <td>maxInputValue</td> | ||
| <td>Number</td> | ||
| <td>100</td> | ||
| <td>The current maximum-value</td> | ||
| </tr> | ||
| <tr> | ||
| <td>step</td> | ||
| <td>Number</td> | ||
| <td>1</td> | ||
| <td>The value between each separate step of your range</td> | ||
| </tr> | ||
| <tr> | ||
| <td>outputFormatter</td> | ||
| <td>Function</td> | ||
| <td>output => `${output} &euro;`</td> | ||
| <td>A function accepting the current output as a parameter and returning a formatted string to output</td> | ||
| </tr> | ||
| <tr> | ||
| <td>progress</td> | ||
| <td>Boolean</td> | ||
| <td>true</td> | ||
| <td>Wether or not a progress bar between each of the rangeSlider-handles will be rendered</td> | ||
| </tr> | ||
| <tr> | ||
| <td>output</td> | ||
| <td>Boolean</td> | ||
| <td>true</td> | ||
| <td>Wether or not two output-fields will be rendered on the bottom left and right ends of your rangeSlider</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
105
2525%Worsened metrics
- Total package byte prevSize
11074
-58.87%- Dev dependency count
7
40%- Number of package files
6
-33.33%- Lines of code
143
-56.8%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes