https://github.com/eclipsemode/range-slider-app
Run demo here:
https://github.com/eclipsemode/range-slider-app
metalamp
Last synced: 5 months ago
JSON representation
Run demo here:
- Host: GitHub
- URL: https://github.com/eclipsemode/range-slider-app
- Owner: eclipsemode
- Created: 2022-05-01T08:28:01.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T15:28:22.000Z (about 3 years ago)
- Last Synced: 2025-01-19T08:19:34.453Z (about 1 year ago)
- Topics: metalamp
- Language: TypeScript
- Homepage: https://eclipsemode.github.io/Range-slider-app/
- Size: 24.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Slider Plugin
--- Watch Demo ---
Libraries:
"devDependencies": {
"@types/jest": "^27.5.1",
"@types/jquery": "^3.5.14",
"@typescript-eslint/eslint-plugin": "^5.21.0",
"@typescript-eslint/parser": "^5.21.0",
"css-loader": "^6.7.1",
"eslint": "^8.14.0",
"eslint-config-airbnb-base-typescript-prettier": "^5.1.0",
"eslint-webpack-plugin": "^3.1.1",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"js-abbreviation-number": "^1.4.0",
"jsdom": "^19.0.0",
"prettier": "^2.8.0",
"pug": "^3.0.2",
"pug-plugin": "^4.5.0",
"sass": "^1.51.0",
"sass-loader": "^12.6.0",
"ts-jest": "^28.0.3",
"ts-loader": "^9.3.0",
"typescript": "^4.6.4",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1",
"gh-pages": "^4.0.0"
},
"dependencies": {
"jquery": "^3.6.0"
}
Commands:
Commands call with npm or yarn.
Install dependencies: npm i or yarn.
Start tests with: npm run test or yarn test
Start development server: npm start
Assemble the project with command: npm run build
Slider initialization:
import Controller from './Controller';
new Controller('.slider', {...options})
User options:
Name
Type
Default value
Description
min
number
0
Minimum value
max
number
1000
Maximum value
step
number
0.1
Step if thumbs
from
number
0
Value of first / min thumb
to
number
1000
Value of second / max thumb
range
boolean
false
Double / single range slider
vertical
boolean
false
Orientation
progress
boolean
true
Scale display
tooltip
boolean
true
Show tooltip above thumbs
configPanel
boolean
true
Show config panel
color
string
{firstColor?: #ffe53b;
secondColor?: #ff2525;
textColor?: #ffe53b;
thumbColor?: #ffe53b; }
Set color
Architecture:
Architecture of slider based on MVP pattern.
Application divided on 3 components - Model, View, Controller,
and this components synchronized with subscriptions. View architecture divided on subscriptions and subViews, which in turn connected in main View.ts.
UML:
In progress...
