--- Watch Demo ---
"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 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
import Controller from './Controller';new Controller('.slider', {...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 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.
In progress...
