ToxinRangeSlider - this is jquery plugin that allows you to select a value or range of values. This is pet project, that being part of MetaLamp education program (task №4).
Read more about of education program follow this link: https://www.metalamp.io/education
Read more about of frontend education program tasks follow this link: rizzoma.com
-
Project bundler: Webpack
-
Package manager: Yarn
-
HTML template engine: PUG
-
CSS preprocessor: LESS
-
Javascript transpiler: Typescript
-
Used Jquery
-
Browser support: Chrome and Firefox - two last version (specified in package.json)
npx browserslist - run this command in project directory to see what browsers was selected
npx browserslist --coverage - check coverage for selected browsers
Add style and script files to html code:
<html>
<head>
<link href="jquery-plugins/toxin-rangeslider/toxin-rangeslider.css" rel="stylesheet" />
<body>
<script type="text/javascript" src="jquery-plugins/toxin-rangeslider/toxin-rangeslider.js"></script>
</body>
</head>
</html>Rangeslider will automatically initialize on elements with class .toxin-rangeslider-here. You can use any html tags that can have content, for example div. Setting options possible with data attribute data-options
<div class="toxin-rangeslider-here" data-options="{"isVertical":true,"isTwoHandles":true,"isTip":true,"minValue":1000,"maxValue":2220,"stepValue":100,"valueFrom":1100,"valueTo":1600}"></div>Manual initialization in javascript code
$('#my-element').toxinRangeSlider({ options });
// Access instance of plugin
$('#my-element').data('toxinRangeSlider');| Option | Type | Defaults | Description |
|---|---|---|---|
| isVertical | boolean | false | Set slider position - vertical or horizontal. |
| isTwoHandles | boolean | true | Set slider handles count - one or two. |
| isTip | boolean | true | Enable tips. |
| minValue | number | 0 | Set slider minimum value |
| maxValue | number | 1000 | Set slider maximum value |
| stepValue | number | 0 | Set slider step. Actual if value is bigger than 0 |
| valueFrom | number | 0 | Set start position for left handle. Not used if isTwoHandles set to false |
| valueTo | number | 1000 | Set start position for right handle. Also used if only one handle (isTwoHandles set to true) |
| items | object* | null | Complex object for define items in slider. |
*Complex object with next fieds: {indexFrom: number, indexFrom: number, indexTo: number, values: (number | string)[] }
| Option | Description |
|---|---|
| indexFrom | Set slider position - vertical or horizontal. |
| indexTo | Set slider handles count - one or two. |
| values | Enable tips. |
Description of plugin architecture in UML notation
git clone https://github.com/wirwl/ToxinRangeSlider.git - copy project from remote repository to local computer
yarn install - install all dependencies
yarn dev - execute project with webpack-dev-server for development with live reloading
yarn build - build project with production mode
yarn deploy - deploy project on github.io
yarn test - run all tests
yarn eslint - check all project files with eslint