├── .editorconfig ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── .npmrc ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── cypress.json ├── cypress └── integration │ └── simple_spec.js ├── demo ├── debug.html ├── demo.css ├── demo.js ├── directiveInCustomTemplate.html ├── index.html ├── lib │ ├── bootstrap.min.css │ └── ui-bootstrap-tpls.js └── sliderModal.html ├── dist ├── rzslider.css ├── rzslider.d.ts ├── rzslider.js ├── rzslider.min.css ├── rzslider.min.js └── rzslider.scss ├── karma.conf.js ├── package.json ├── rzslider.d.ts ├── src ├── rzSliderTpl.html ├── rzslider.js ├── rzslider.less └── variables.less └── tests └── specs ├── accessibility-test.js ├── custom-template-test.js ├── custom-tpl.html ├── helper-functions-test.js ├── helper.js ├── keyboard-controls ├── draggableRangeOnly-range-slider-test.js ├── range-slider-test.js ├── single-slider-test.js ├── specific-test.js └── vertical-slider-test.js ├── labels-test.js ├── mouse-controls ├── draggable-range-slider-horizontal-test.js ├── draggableOnly-range-slider-horizontal-test.js ├── minMaxLimit-range-slider-horizontal-test.js ├── minMaxLimit-single-slider-horizontal-test.js ├── minMaxRange-noSwitching-range-slider-horizontal-test.js ├── minMaxRange-range-slider-horizontal-test.js ├── noSwitching-range-slider-horizontal-test.js ├── onlyBindHandles-single-slider-horizontal-test.js ├── pushRange-range-slider-horizontal-test.js ├── range-slider-horizontal-test.js ├── range-slider-vertical-test.js ├── restricted-range-slider-test.js ├── single-slider-horizontal-test.js └── single-slider-vertical-test.js ├── options-handling-test.js ├── range-slider-init-test.js ├── rz-slider-options-test.js ├── scale-test.js ├── single-slider-init-test.js ├── test-template.js └── ticks-test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | end_of_line = lf 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.js] 13 | quote_type = single 14 | curly_bracket_next_line = true 15 | indent_brace_style = Allman 16 | spaces_around_operators = true 17 | spaces_around_brackets = inside 18 | continuation_indent_size = 2 19 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [ValentinH] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | Demo: https://jsfiddle.net/wm3ce8jb/ (fork this example and update the link) 21 | 22 | **Expected behavior** 23 | A clear and concise description of what you expected to happen. 24 | 25 | **Screenshots** 26 | If applicable, add screenshots to help explain your problem. 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .idea/ 3 | bower_components/ 4 | temp/ 5 | tests/coverage/ 6 | yarn.lock 7 | cypress/videos 8 | npm-debug.log 9 | .history/ -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '4.2' 4 | cache: 5 | directories: 6 | - node_modules 7 | notifications: 8 | email: false 9 | before_install: 10 | - npm i -g npm@^2.0.0 11 | - npm install -g grunt-cli 12 | install: npm install 13 | before_script: 14 | - npm run build 15 | script: 16 | - npm run test 17 | - npm run e2e 18 | after_success: 19 | - npm run report-coverage 20 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 7.0.1 (2021-09-06) 2 | 3 | ## Bug fix 4 | 5 | - chore(styles): add parentheses around division-like expr's (#679) 6 | 7 | # 7.0.0 (2019-02-23) 8 | 9 | ## Feature 10 | 11 | - feat(transition): slider moves are now animated. (this can be disabled via the `disableAnimation` option) 12 | 13 | ## Bug fix 14 | 15 | - fix(vertical): Support switching between horizontal and vertical 16 | 17 | ## Breaking change 18 | 19 | The module name was renamed from `rzModule` to `rzSlider`. 20 | 21 | # 6.7.0 (2019-02-23) 22 | 23 | ## Feature 24 | 25 | - feat(ticks): add the option to use ticksArray as array of objects (#662, thanks @vdiez) 26 | 27 | # 6.6.0 (2018-06-29) 28 | 29 | ## Feature 30 | 31 | - feat(range): adds the `restrictedRange` option (#638, thanks @DanielReid) 32 | 33 | ## ⚠️ Unwanted breaking change ⚠️ 34 | 35 | Sorry for this, but this version is breaking if you are using the `rz-slider-tpl-url` attribute. You need to update your template to have the correct number of elements. 36 | 37 | # 6.5.1 (2018-03-30) 38 | 39 | ## Bug fix 40 | 41 | - revert: onStart: Remove stop propagation call so events will bubble up (#612) 42 | 43 | # 6.5.0 (2018-02-06) 44 | 45 | ## Feature 46 | 47 | - feat(\$compile): adds labelOverlapSeparator as an option (#616) 48 | 49 | # 6.4.4 (2018-01-24) 50 | 51 | ## Bug fix 52 | 53 | - onStart: Remove stop propagation call so events will bubble up (#612) 54 | 55 | # 6.4.3 (2017-12-01) 56 | 57 | ## Bug fix 58 | 59 | - Remove the semicolon at the end of the `dist/rzslider.css` file. It was introduced by previous release. 60 | 61 | # 6.4.2 (2017-11-30) 62 | 63 | ## Bug fix 64 | 65 | - Add a semicolon at the end of the `dist/rzslider.js` file. It avoids errors when people concat this file with other libs without using the minified version. 66 | 67 | # 6.4.1 (2017-11-17) 68 | 69 | ## Bug fix 70 | 71 | - Options: react to changes of options of Function type (#590) 72 | 73 | # 6.4.0 (2017-08-12) 74 | 75 | ## Feature 76 | 77 | - Add the `showOuterSelectionBars` option (#553). 78 | 79 | # 6.3.0 (2017-08-07) 80 | 81 | ## Feature 82 | 83 | - Handle different values for `showTicks` and `showTicksValues` (#550). 84 | 85 | # 6.2.3 (2017-07-08) 86 | 87 | ## Tooling 88 | 89 | - Add Typescript definition file. 90 | 91 | # 6.2.2 (2017-05-16) 92 | 93 | ## Fixes 94 | 95 | - Fix (again) onEnd event de-registration. 96 | 97 | # 6.2.1 (2017-05-15) 98 | 99 | ## Fixes 100 | 101 | - Fix onEnd event being sent several times on non-mobiles devices (#536) 102 | 103 | # 6.2.0 (2017-05-25) 104 | 105 | ## New Feature 106 | 107 | - Handle multi touch events on separate sliders (#535). Thanks @daniela-mateescu :) 108 | 109 | # 6.1.2 (2017-05-15) 110 | 111 | ## Fixes 112 | 113 | - Fix ticks and values at intermediate positions on IE (#531) 114 | 115 | # 6.1.1 (2017-03-29) 116 | 117 | ## Fixes 118 | 119 | - Add vendor prefixes for transform property in JS code (#518) 120 | 121 | # 6.1.0 (2017-03-06) 122 | 123 | ## Features 124 | 125 | - Add labelling options for a11y (#505) 126 | 127 | # 6.0.2 (2017-03-02) 128 | 129 | ## Fixes 130 | 131 | - Update the combined labels on separation (#502) 132 | 133 | # 6.0.1 (2017-02-14) 134 | 135 | ## Fixes 136 | 137 | - Ensure model value is current when custom translate function runs for tick values 138 | 139 | # 6.0.0 (2017-01-02) 140 | 141 | ## Refactoring 142 | 143 | - Refactor/simplify the css rules to ease the customisation. 144 | 145 | **You might want to check that all your custom styles are still correctly applied...** 146 | 147 | # 5.9.0 (2016-12-12) 148 | 149 | ## Features 150 | 151 | - Add selectionBarGradient option to customize the selection bar (#473) 152 | 153 | # 5.8.9 (2016-12-11) 154 | 155 | ## Improvement 156 | 157 | - Add autoprefixer for CSS builds (#472) 158 | 159 | # 5.8.8 (2016-12-11) 160 | 161 | ## Fix 162 | 163 | - Prevent angular being loaded twice when using with browserify (#474) 164 | 165 | # 5.8.7 (2016-11-09) 166 | 167 | ## Fix 168 | 169 | - Add Math.round for positions and dimensions - thanks to @DmitryKrekota (#454) 170 | 171 | # 5.8.6 (2016-11-08) 172 | 173 | ## Fix 174 | 175 | - Apply the pushRange with maxRange - thanks to @GuilloOme (#456) 176 | 177 | # 5.8.5 (2016-11-05) 178 | 179 | ## Fix 180 | 181 | - Fix overlapping max and ceil labels in some cases (#396) 182 | 183 | # 5.8.4 (2016-11-05) 184 | 185 | ## Improvement 186 | 187 | - Refactor autoHiding algorithm for labels (fix #446) 188 | 189 | # 5.8.3 (2016-11-03) 190 | 191 | ## Improvement 192 | 193 | - Generate a SCSS file (simple copy of the css file) in the dist folder so it can be imported (#449) 194 | 195 | # 5.8.2 (2016-11-03) 196 | 197 | ## Fix 198 | 199 | - Fix ceil label positioning (#448) 200 | 201 | # 5.8.1 (2016-10-27) 202 | 203 | ## Fix 204 | 205 | - Enable using with Browserify (#436) 206 | 207 | # 5.8.0 (2016-10-22) 208 | 209 | ## Features 210 | 211 | - Handle Date object in stepsArray (#424 ) 212 | 213 | ## Fixes 214 | 215 | - Fix style for disabled range slider and ticks (#394) 216 | - Fix slider goes back when moved and scaled (#346) 217 | 218 | # 5.7.0 (2016-10-16) 219 | 220 | ## Features 221 | 222 | - Add a `logScale` option to display the slider using a logarithmic scale (#280). 223 | - Add `customValueToPosition` and `customPositionToValue` options to display the slider using a custom scale (#280). 224 | 225 | # 5.6.0 (2016-10-16) 226 | 227 | ## Features 228 | 229 | - Add a `ticksArray` option to display ticks at specific positions (#426). 230 | 231 | To enable this new feature, the way the ticks are rendered has been changed. Now each tick is positioned absolutely using a `transform: translate()` instruction. 232 | 233 | # 5.5.1 (2016-09-22) 234 | 235 | ## Fix 236 | 237 | - Prevent losing focus when slider is rerendered (#415). 238 | 239 | # 5.5.0 (2016-09-06) 240 | 241 | ## Features 242 | 243 | - Add an `autoHideLimitLabels` to disable the auto-hiding of limit labels (#405). 244 | 245 | # 5.4.3 (2016-08-07) 246 | 247 | ## Fix 248 | 249 | - Fix minLimit/maxLimit bugged for draggableRange (#384). 250 | 251 | # 5.4.2 (2016-08-02) 252 | 253 | ## Fix 254 | 255 | - Fix minimum value goes below floor when using maxRange (#377). 256 | 257 | # 5.4.1 (2016-07-17) 258 | 259 | ## Fix 260 | 261 | - Fix showing limit labels when pointer labels are always hidden (#373). 262 | 263 | # 5.4.0 (2016-07-13) 264 | 265 | ## Features 266 | 267 | - Add function to customize color of ticks (#372). 268 | 269 | # 5.3.0 (2016-07-11) 270 | 271 | ## Features 272 | 273 | - Expose labels on scope in template (#358). 274 | 275 | # 5.2.0 (2016-07-07) 276 | 277 | ## Features 278 | 279 | - Add a `customTemplateScope` option (#354). 280 | 281 | # 5.1.1 (2016-07-06) 282 | 283 | ## Fix 284 | 285 | - Fix the way to check when event properties are undefined (#365). 286 | 287 | # 5.1.0 (2016-07-02) 288 | 289 | ## Features 290 | 291 | - Add a `pushRange` option (#341). 292 | 293 | # 5.0.1 (2016-07-01) 294 | 295 | ## Fix 296 | 297 | - Switch from using opacity to visibility to show/hide elements (#362). 298 | 299 | # 5.0.0 (2016-06-30) 300 | 301 | ## Fix 302 | 303 | - AMD/CommonJS exported module: export module name instead of module (#360). 304 | 305 | ## Breaking change 306 | 307 | Code that relies on the module object to be exported (accessing the name via .name for example) will break, since the name is now directly returned. 308 | 309 | # 4.1.0 (2016-06-30) 310 | 311 | ## Improvement 312 | 313 | - Add a `bindIndexForStepsArray` option that enable to use `stepsArray` with the same behavior as before 4.0 (#345). 314 | 315 | ## Fix 316 | 317 | - Hide floor/ceil label when overlapped on combo label (#357). 318 | - Fix switching from steps array to regular steps (#361). 319 | 320 | # 4.0.2 (2016-06-07) 321 | 322 | ## Improvement 323 | 324 | - Add a `mergeRangeLabelsIfSame` option (#245). 325 | 326 | # 4.0.1 (2016-06-04) 327 | 328 | ## Improvement 329 | 330 | - Add a pointerType arg for the callbacks (onStart, onChange and onEnd) to identify which handle is used (#339). 331 | 332 | # 4.0.0 (2016-06-04) 333 | 334 | ## Improvement 335 | 336 | - `stepsArray`: Bind rzSliderModel and rzSliderHigh to the actual value (#335). 337 | 338 | ## Breaking changes 339 | 340 | - From now on, when using the `stepsArray` feature, you should directly provide the actual value to rzSliderModel and rzSliderHigh instead of passing the index of this value. 341 | Thus, you need to update your config like in the following example: 342 | 343 | ```js 344 | /* before 4.0 version */ 345 | vm.slider = { 346 | value: 4, // index of the 'E' value in the array 347 | options: { 348 | stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), 349 | }, 350 | } 351 | 352 | /* from 4.0 version */ 353 | vm.slider = { 354 | value: 'E', 355 | options: { 356 | stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), 357 | }, 358 | } 359 | ``` 360 | 361 | # 3.0.0 (2016-06-02) 362 | 363 | ## Features 364 | 365 | - Add IE8 support (#314). 366 | - Consolidate onStart, onChange and onEnd for keyboard (#319). 367 | - Added `rz-floor` and `rz-ceil` classes to floor and ceil label to allow styling (#337). 368 | 369 | ## Breaking changes 370 | 371 | - From now on, to allow the IE8 support, the directive is configured with `replace: true`. Thus, you need to update your custom CSS rules like in the following example: 372 | 373 | ```css 374 | /* before 3.0 version */ 375 | rzslider { 376 | color: red; 377 | } 378 | 379 | /* from 3.0 version */ 380 | .rzslider { 381 | color: red; 382 | } 383 | ``` 384 | 385 | # 2.14.0 (2016-05-22) 386 | 387 | ## Features 388 | 389 | - Add `minLimit` and `maxLimit` options (#332). 390 | - Add a `maxRange` option (#333). 391 | - Add `boundPointerLabels` option (#323). 392 | 393 | # 2.13.0 (2016-04-24) 394 | 395 | ## Features 396 | 397 | - Add a `getLegend` option (#318). 398 | - Handle objects in `stepsArray` that can contain `value` and `legend` properties. 399 | 400 | # 2.12.0 (2016-04-22) 401 | 402 | ## Features 403 | 404 | - Accept numbers for showTicks/showTicksValues to display ticks at intermediate positions (#264). 405 | 406 | # 2.11.0 (2016-04-01) 407 | 408 | ## Features 409 | 410 | - Add a hidePointerLabels option (#273). 411 | 412 | ## Fix 413 | 414 | - Position long labels on vertical sliders correctly (#306). 415 | 416 | # 2.10.4 (2016-03-16) 417 | 418 | ## Fix 419 | 420 | - Fix the floor limit when floor is different than 0 (#293). 421 | 422 | # 2.10.3 (2016-03-14) 423 | 424 | ## Fix 425 | 426 | - Prefix all CSS classes with rz- to prevent conflicts (#292). 427 | 428 | # 2.10.2 (2016-03-01) 429 | 430 | ## Bug fixes 431 | 432 | - Remove the dist folder from gitignore. 433 | 434 | # 2.10.1 (2016-03-01) 435 | 436 | ## Bug fixes 437 | 438 | - Republish the npm module since dist files were missing. 439 | 440 | # 2.10.0 (2016-02-29) 441 | 442 | ## Features 443 | 444 | - Added `rightToLeft` option for RTL support (#270). Thanks @Liam-Ryan :). 445 | 446 | # 2.9.0 (2016-02-18) 447 | 448 | ## Features 449 | 450 | - Change `rzSliderOptions` to use expression binding (#266). 451 | 452 | # 2.8.0 (2016-02-08) 453 | 454 | ## Features 455 | 456 | - Add a `getPointerColor` option to dynamically change the pointers color (#253). 457 | 458 | # 2.7.1 (2016-02-06) 459 | 460 | ## Fix 461 | 462 | - Fix high label positioning when size is different than the ceil one. 463 | 464 | # 2.7.0 (2016-02-06) 465 | 466 | ## Features 467 | 468 | - Add an `enforceStep` option (defaults to true) (#246). 469 | - Add a `showSelectionBarFromValue` options (#250). 470 | - Use jqLite html() method to display label values so the translate function can return formated content (#251). 471 | - Pass a label string as third arg to the `translate` function to differentiate the labels (#252). 472 | 473 | ## Fix 474 | 475 | - Improve combined label position and show only one value if min==max (#245). 476 | 477 | # 2.6.0 (2016-01-31) 478 | 479 | ## Features 480 | 481 | - Add a `noSwitching` option to prevent the user from switching the min and max handles (#233). 482 | 483 | ## Bug fixes 484 | 485 | - Refactor the internal `roundStep` function that was too strict (5d130f09d). 486 | 487 | # 2.5.0 (2016-01-24) 488 | 489 | ## Features 490 | 491 | - Add a `minRange` option to set a minimal range (#231). 492 | - Pass the slider values to the `onStart`, `onChange` and `onEnd` callbacks. 493 | - Rollback and improve the callback changes brought with 2.4.1 that were no applying the last update to the scope anymore. 494 | 495 | # 2.4.1 (2016-01-15) 496 | 497 | ## Performance improvements 498 | 499 | - Remove the \$timeout call in the init method (#223). 500 | - Remove the \$timeout call in the onStart callback. 501 | - Remove the \$timeout call in the onChange callback (#229). 502 | 503 | # 2.4.0 (2015-12-30) 504 | 505 | ## Features 506 | 507 | - Add an `enforceRange` options to round the `rzSliderModel` and `rzSliderHigh` to the slider range even when modified from outside the slider.(#208). 508 | - Add a `ticksTooltip` option used to display a tooltip when a tick is hovered (#209). 509 | - Add an `onlyBindHandles` option to only bind events on slider handles (#212). 510 | - Add a `showSelectionBarEnd` option to display the selection bar after the value (#214). 511 | 512 | ## Bug fixes 513 | 514 | - Fix reset of maxH element (#204). 515 | - Change the watchers order to prevent unwanted model modifications (#207). 516 | 517 | # 2.3.0 (2015-12-22) 518 | 519 | ## Features 520 | 521 | - Add keyboard support (activated by default with `keyboardSupport` set to true) (#191). 522 | - Add a `draggableRangeOnly` options (#203). 523 | 524 | # 2.2.0 (2015-12-17) 525 | 526 | ## Features 527 | 528 | - Add a `getSelectionBarColor` option to dynamically change the selection bar color (#197). 529 | 530 | ## Bug fixes 531 | 532 | - Fix negative float values rendering (#190). 533 | 534 | # 2.1.0 (2015-11-29) 535 | 536 | ## Features 537 | 538 | - Add a `vertical` options to display vertical sliders (#185). 539 | - Pass the options.id to the onStart, onChange and onEnd callbacks (#182). 540 | - Force labels to stay contained within element containing slider (#175). 541 | 542 | ## Bug fixes 543 | 544 | - add vendor-prefix to `display: flex` used by ticks (#160). 545 | 546 | # 2.0.0 (2015-11-12) 547 | 548 | ## Breaking changes 549 | 550 | - All attributes except `rzSliderModel` and `rzSliderHigh` are moved to `rzSliderOptions`. (See the new documentation in ReadMe) 551 | 552 | ## Features 553 | 554 | - Add a `rzSliderOptions` attribute to pass options to the slider. 555 | - Add a `RzSliderOptions.options()` method to set global options. 556 | - Add a `scale` option to fix sliders displayed in an element that uses `transform: scale(0.5)`. 557 | - Add a `stepsArray` option (#163) 558 | - Add an `id` option that is passed to the translate function as second arg (#161) 559 | - Add a `ticksValuesTooltip` option that is used to display a tooltip on the ticks values (requires angular-ui bootstrap). 560 | 561 | # 1.1.0 (2015-11-07) 562 | 563 | ## Features 564 | 565 | - Configurable update interval (#153) 566 | 567 | ## Bug fixes 568 | 569 | - Update floor label so that it hides correctly when using single slider. (#155) 570 | - Fix ticks values when step is a float. 571 | - Remove the delta checking in updateLowHandle because it leads to hard-to-debug bugs. 572 | 573 | # 1.0.0 (2015-10-13) 574 | 575 | - Rename the NPM package from jusas-angularjs-slider to angularjs-slider because jusas was added by mistake during a PR.- Start to use semantic versioning. 576 | 577 | # 0.1.36 (2015-10-12) 578 | 579 | ## Features 580 | 581 | - Separate the LESS variables from the main file to ease versioning of local customisations. 582 | 583 | # 0.1.35 (2015-10-08) 584 | 585 | ## Features 586 | 587 | - Add enabled/disabled option for slider: `rz-slider-disabled="boolean"` 588 | 589 | # 0.1.34 (2015-10-03) 590 | 591 | ## Features 592 | 593 | - Support ticks for range sliders and slider with always visible bars. 594 | 595 | # 0.1.33 (2015-10-02) 596 | 597 | ## Features 598 | 599 | - Add a `rzSliderShowTicks` to show a tick on each step. 600 | - Add a `rzSliderShowTicksValue` to show a tick and its value on each step. 601 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at valentin@hervi.eu. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Reporting issues 2 | 3 | Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking [our standard jsFiddle](http://jsfiddle.net/cwhgLcjv/), adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug. 4 | 5 | ## Prettier 6 | 7 | This project use [Prettier](https://github.com/prettier/prettier) for its code formatting. The goal is to be sure that all code pushed to this repository has the same style. A git hook is set up to format all the edited files on commit. 8 | 9 | ## Submittting a Pull Request 10 | 11 | To contribute to the project, please follow these steps: 12 | 13 | 1. Get approval for the idea by filing an issue and talking with me about the changes 14 | 2. Fork the repo 15 | 3. Make a branch for your change 16 | 4. Run `yarn` 17 | 5. Run `yarn test` 18 | 6. Make your changes 19 | 7. Test your changes (if you need a new test file, please copy the `test-template.js` file in the tests/specs folder.) 20 | 8. Run `yarn build` to generate the dist files 21 | 9. Run `git add -A` to add your changes 22 | 10. Run `yarn commit` (**Do not** use `git commit`) - follow the prompts to create your git message 23 | 11. Push your changes with `git push` 24 | 12. Create the Pull Request (a demo showing what the PR does is always good so you can fork [this fiddle](http://jsfiddle.net/cwhgLcjv/)) 25 | 13. If there are several commits, please [rebase](https://github.com/edx/edx-platform/wiki/How-to-Rebase-a-Pull-Request) and [squash](https://github.com/edx/edx-platform/wiki/How-to-Rebase-a-Pull-Request#squash-your-changes) everything to only get one commit. 26 | 14. Get merged and celebrate 27 | 28 | **Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 29 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | var banner = 3 | '/*! <%= pkg.name %> - v<%= pkg.version %> - \n' + 4 | ' (c) <%= pkg.author %> - \n' + 5 | ' <%= pkg.repository.url %> - \n' + 6 | ' <%= grunt.template.today("yyyy-mm-dd") %> */\n', 7 | minBanner = banner.replace(/\n/g, '') + '\n' 8 | 9 | // Project configuration. 10 | grunt.initConfig({ 11 | pkg: grunt.file.readJSON('package.json'), 12 | 13 | minBanner: minBanner, 14 | 15 | recess: { 16 | options: { 17 | compile: true, 18 | }, 19 | 20 | slider: { 21 | src: ['src/rzslider.less'], 22 | dest: 'dist/rzslider.css', 23 | }, 24 | 25 | min: { 26 | options: { 27 | compress: true, 28 | banner: '<%= minBanner %>', 29 | }, 30 | src: ['dist/rzslider.css'], 31 | dest: 'dist/rzslider.min.css', 32 | }, 33 | }, 34 | 35 | uglify: { 36 | options: { 37 | report: 'min', 38 | banner: '<%= minBanner %>', 39 | }, 40 | rzslider: { 41 | files: { 42 | 'dist/rzslider.min.js': ['dist/rzslider.js'], 43 | }, 44 | }, 45 | }, 46 | 47 | ngtemplates: { 48 | app: { 49 | src: 'src/**.html', 50 | dest: 'temp/templates.js', 51 | options: { 52 | htmlmin: { 53 | collapseBooleanAttributes: true, 54 | collapseWhitespace: true, 55 | removeAttributeQuotes: true, 56 | removeComments: true, // Only if you don't use comment directives! 57 | removeEmptyAttributes: true, 58 | removeRedundantAttributes: true, 59 | removeScriptTypeAttributes: true, 60 | removeStyleLinkTypeAttributes: true, 61 | }, 62 | module: 'rzSlider', 63 | url: function(url) { 64 | return url.replace('src/', '') 65 | }, 66 | bootstrap: function(module, script) { 67 | return 'module.run(function($templateCache) {\n' + script + '\n});' 68 | }, 69 | }, 70 | }, 71 | }, 72 | 73 | replace: { 74 | dist: { 75 | options: { 76 | patterns: [ 77 | { 78 | match: /\/\*templateReplacement\*\//, 79 | replacement: '<%= grunt.file.read("temp/templates.js") %>', 80 | }, 81 | ], 82 | }, 83 | files: [ 84 | { 85 | expand: true, 86 | flatten: true, 87 | src: ['src/rzslider.js', 'rzslider.d.ts'], 88 | dest: 'dist/', 89 | }, 90 | ], 91 | }, 92 | }, 93 | 94 | concat: { 95 | options: { 96 | stripBanners: true, 97 | banner: banner, 98 | }, 99 | js: { 100 | src: ['dist/rzslider.js'], 101 | dest: 'dist/rzslider.js', 102 | options: { 103 | footer: ';', // to prevent error when people concat the file and don't use the min version 104 | }, 105 | }, 106 | css: { 107 | src: ['dist/rzslider.css'], 108 | dest: 'dist/rzslider.css', 109 | }, 110 | }, 111 | 112 | ngAnnotate: { 113 | options: { 114 | singleQuotes: true, 115 | }, 116 | rzslider: { 117 | files: [ 118 | { 119 | 'dist/rzslider.js': 'dist/rzslider.js', 120 | }, 121 | { 122 | expand: true, 123 | src: ['dist/rzslider.js'], 124 | }, 125 | ], 126 | }, 127 | }, 128 | watch: { 129 | all: { 130 | files: ['dist/*', 'demo/*'], 131 | options: { 132 | livereload: true, 133 | }, 134 | }, 135 | js: { 136 | files: ['src/*.js', 'src/*.html'], 137 | tasks: ['js'], 138 | }, 139 | less: { 140 | files: ['src/*.less'], 141 | tasks: ['css'], 142 | }, 143 | test: { 144 | files: ['src/*.js', 'tests/specs/**/*.js'], 145 | tasks: ['test'], 146 | }, 147 | }, 148 | serve: { 149 | options: { 150 | port: 9000, 151 | }, 152 | }, 153 | karma: { 154 | unit: { 155 | configFile: 'karma.conf.js', 156 | singleRun: true, 157 | }, 158 | }, 159 | 160 | copy: { 161 | copyToSass: { 162 | files: [ 163 | { 164 | expand: false, 165 | src: ['dist/rzslider.css'], 166 | dest: 'dist/rzslider.scss', 167 | }, 168 | ], 169 | }, 170 | }, 171 | postcss: { 172 | options: { 173 | map: true, 174 | processors: [ 175 | require('autoprefixer')({ 176 | browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'], 177 | }), 178 | ], 179 | }, 180 | dist: { 181 | src: 'dist/rzslider.css', 182 | }, 183 | }, 184 | }) 185 | 186 | grunt.loadNpmTasks('grunt-contrib-uglify') 187 | grunt.loadNpmTasks('grunt-recess') 188 | grunt.loadNpmTasks('grunt-angular-templates') 189 | grunt.loadNpmTasks('grunt-replace') 190 | grunt.loadNpmTasks('grunt-contrib-concat') 191 | grunt.loadNpmTasks('grunt-ng-annotate') 192 | grunt.loadNpmTasks('grunt-contrib-watch') 193 | grunt.loadNpmTasks('grunt-serve') 194 | grunt.loadNpmTasks('grunt-karma') 195 | grunt.loadNpmTasks('grunt-contrib-copy') 196 | grunt.loadNpmTasks('grunt-postcss') 197 | 198 | grunt.registerTask('default', ['css', 'js']) 199 | grunt.registerTask('test', ['karma']) 200 | 201 | grunt.registerTask('css', [ 202 | 'recess', 203 | 'concat:css', 204 | 'postcss:dist', 205 | 'copy:copyToSass', 206 | ]) 207 | grunt.registerTask('js', [ 208 | 'ngtemplates', 209 | 'replace', 210 | 'concat:js', 211 | 'ngAnnotate', 212 | 'uglify', 213 | ]) 214 | } 215 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Rafal Zajac 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angularjs-slider", 3 | "version": "7.0.1", 4 | "homepage": "https://github.com/angular-slider/angularjs-slider", 5 | "authors": [ 6 | "Rafal Zajac ", 7 | "Valentin Hervieu ", 8 | "Jussi Saarivirta " 9 | ], 10 | "description": 11 | "AngularJS slider directive with no external dependencies. Mobile friendly!", 12 | "main": ["dist/rzslider.js", "dist/rzslider.css"], 13 | "keywords": ["angularjs", "slider"], 14 | "license": "MIT", 15 | "ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"], 16 | "devDependencies": { 17 | "angular": "~1.4.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /cypress/integration/simple_spec.js: -------------------------------------------------------------------------------- 1 | describe("My First Test", function() { 2 | it("Visits the debug page", function() { 3 | cy.visit("http://127.0.0.1:8080/demo/debug.html"); 4 | cy.get("li.rz-tick:nth-of-type(8)").click(); 5 | cy.get(".rz-model-value").should("have.text", "35"); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /demo/debug.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AngularJS Touch Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Debug slider

21 | 25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font-family: 'Open Sans', sans-serif; 8 | color: #1f2636; 9 | font-size: 14px; 10 | padding-bottom: 40px; 11 | } 12 | 13 | header { 14 | background: #0db9f0; 15 | color: #fff; 16 | margin: -40px; 17 | margin-bottom: 40px; 18 | text-align: center; 19 | padding: 40px 0; 20 | } 21 | 22 | h1 { 23 | font-weight: 300; 24 | } 25 | 26 | h2 { 27 | margin-bottom: 10px; 28 | } 29 | 30 | .wrapper { 31 | background: #fff; 32 | padding: 40px; 33 | } 34 | 35 | article { 36 | margin-bottom: 10px; 37 | } 38 | 39 | .tab-pane { 40 | padding-top: 10px; 41 | } 42 | 43 | .field-title { 44 | width: 100px; 45 | } 46 | 47 | .vertical-sliders { 48 | margin: 0; 49 | } 50 | 51 | .vertical-sliders > div { 52 | height: 250px; 53 | } 54 | 55 | .custom-slider.rzslider .rz-bar { 56 | background: #ffe4d1; 57 | height: 2px; 58 | } 59 | 60 | .custom-slider.rzslider .rz-selection { 61 | background: orange; 62 | } 63 | 64 | .custom-slider.rzslider .rz-pointer { 65 | width: 8px; 66 | height: 16px; 67 | top: auto; /* to remove the default positioning */ 68 | bottom: 0; 69 | background-color: #333; 70 | border-top-left-radius: 3px; 71 | border-top-right-radius: 3px; 72 | } 73 | 74 | .custom-slider.rzslider .rz-pointer:after { 75 | display: none; 76 | } 77 | 78 | .custom-slider.rzslider .rz-bubble { 79 | bottom: 14px; 80 | } 81 | 82 | .custom-slider.rzslider .rz-limit { 83 | font-weight: bold; 84 | color: orange; 85 | } 86 | 87 | .custom-slider.rzslider .rz-tick { 88 | width: 1px; 89 | height: 10px; 90 | margin-left: 4px; 91 | border-radius: 0; 92 | background: #ffe4d1; 93 | top: -1px; 94 | } 95 | 96 | .custom-slider.rzslider .rz-tick.rz-selected { 97 | background: orange; 98 | } 99 | -------------------------------------------------------------------------------- /demo/directiveInCustomTemplate.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{floorLabel}} 18 | {{ceilLabel}} 19 | 20 | 21 | 22 | 23 | - 24 | 25 | 26 |
    27 |
  • 28 | {{ t.value }} 29 | {{ t.legend }} 30 |
    • 31 |
32 |
33 | -------------------------------------------------------------------------------- /demo/sliderModal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 19 | 20 |
21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /dist/rzslider.css: -------------------------------------------------------------------------------- 1 | /*! angularjs-slider - v7.1.0 - 2 | (c) Rafal Zajac , Valentin Hervieu , Jussi Saarivirta , Angelin Sirbu - 3 | https://github.com/angular-slider/angularjs-slider - 4 | 2022-05-26 */ 5 | .rzslider { 6 | position: relative; 7 | display: inline-block; 8 | width: 100%; 9 | height: 4px; 10 | margin: 35px 0 15px 0; 11 | vertical-align: middle; 12 | -webkit-user-select: none; 13 | -moz-user-select: none; 14 | -ms-user-select: none; 15 | user-select: none; 16 | } 17 | 18 | .rzslider.noanimate * { 19 | transition: none !important; 20 | } 21 | 22 | .rzslider.with-legend { 23 | margin-bottom: 40px; 24 | } 25 | 26 | .rzslider[disabled] { 27 | cursor: not-allowed; 28 | } 29 | 30 | .rzslider[disabled] .rz-pointer { 31 | cursor: not-allowed; 32 | background-color: #d8e0f3; 33 | } 34 | 35 | .rzslider[disabled] .rz-draggable { 36 | cursor: not-allowed; 37 | } 38 | 39 | .rzslider[disabled] .rz-selection { 40 | background: #8b91a2; 41 | } 42 | 43 | .rzslider[disabled] .rz-tick { 44 | cursor: not-allowed; 45 | } 46 | 47 | .rzslider[disabled] .rz-tick.rz-selected { 48 | background: #8b91a2; 49 | } 50 | 51 | .rzslider span { 52 | position: absolute; 53 | display: inline-block; 54 | white-space: nowrap; 55 | } 56 | 57 | .rzslider .rz-base { 58 | width: 100%; 59 | height: 100%; 60 | padding: 0; 61 | } 62 | 63 | .rzslider .rz-bar-wrapper { 64 | left: 0; 65 | z-index: 1; 66 | width: 100%; 67 | height: 32px; 68 | padding-top: 16px; 69 | margin-top: -16px; 70 | box-sizing: border-box; 71 | transition: all linear 0.3s; 72 | } 73 | 74 | .rzslider .rz-draggable { 75 | cursor: move; 76 | } 77 | 78 | .rzslider .rz-bar { 79 | left: 0; 80 | z-index: 1; 81 | width: 100%; 82 | height: 4px; 83 | background: #d8e0f3; 84 | border-radius: 2px; 85 | } 86 | 87 | .rzslider .rz-bar-wrapper.rz-transparent .rz-bar { 88 | background: transparent; 89 | } 90 | 91 | .rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar { 92 | background: #df002d; 93 | } 94 | 95 | .rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar { 96 | background: #03a688; 97 | } 98 | 99 | .rzslider .rz-selection { 100 | z-index: 2; 101 | background: #0db9f0; 102 | border-radius: 2px; 103 | transition: background-color linear 0.3s; 104 | } 105 | 106 | .rzslider .rz-restricted { 107 | z-index: 3; 108 | background: #ff0000; 109 | border-radius: 2px; 110 | } 111 | 112 | .rzslider .rz-pointer { 113 | top: -14px; 114 | z-index: 3; 115 | width: 32px; 116 | height: 32px; 117 | cursor: pointer; 118 | background-color: #0db9f0; 119 | border-radius: 16px; 120 | transition: all linear 0.3s; 121 | } 122 | 123 | .rzslider .rz-pointer:after { 124 | position: absolute; 125 | top: 12px; 126 | left: 12px; 127 | width: 8px; 128 | height: 8px; 129 | background: #ffffff; 130 | border-radius: 4px; 131 | content: ''; 132 | } 133 | 134 | .rzslider .rz-pointer:hover:after { 135 | background-color: #ffffff; 136 | } 137 | 138 | .rzslider .rz-pointer.rz-active { 139 | z-index: 4; 140 | } 141 | 142 | .rzslider .rz-pointer.rz-active:after { 143 | background-color: #451aff; 144 | } 145 | 146 | .rzslider .rz-bubble { 147 | bottom: 16px; 148 | padding: 1px 3px; 149 | color: #55637d; 150 | cursor: default; 151 | transition: all linear 0.3s; 152 | } 153 | 154 | .rzslider .rz-bubble.rz-limit { 155 | color: #55637d; 156 | transition: none; 157 | } 158 | 159 | .rzslider .rz-ticks { 160 | position: absolute; 161 | top: -3px; 162 | left: 0; 163 | z-index: 1; 164 | width: 100%; 165 | height: 0; 166 | margin: 0; 167 | list-style: none; 168 | box-sizing: border-box; 169 | } 170 | 171 | .rzslider .rz-ticks-values-under .rz-tick-value { 172 | top: auto; 173 | bottom: -32px; 174 | } 175 | 176 | .rzslider .rz-tick { 177 | position: absolute; 178 | top: 0; 179 | left: 0; 180 | width: 10px; 181 | height: 10px; 182 | margin-left: 11px; 183 | text-align: center; 184 | cursor: pointer; 185 | background: #d8e0f3; 186 | border-radius: 50%; 187 | transition: background-color linear 0.3s; 188 | } 189 | 190 | .rzslider .rz-tick.rz-selected { 191 | background: #0db9f0; 192 | } 193 | 194 | .rzslider .rz-tick-value { 195 | position: absolute; 196 | top: -30px; 197 | transform: translate(-50%, 0); 198 | } 199 | 200 | .rzslider .rz-tick-legend { 201 | position: absolute; 202 | top: 24px; 203 | max-width: 50px; 204 | white-space: normal; 205 | transform: translate(-50%, 0); 206 | } 207 | 208 | .rzslider.rz-vertical { 209 | position: relative; 210 | width: 4px; 211 | height: 100%; 212 | padding: 0; 213 | margin: 0 20px; 214 | vertical-align: baseline; 215 | } 216 | 217 | .rzslider.rz-vertical .rz-base { 218 | width: 100%; 219 | height: 100%; 220 | padding: 0; 221 | } 222 | 223 | .rzslider.rz-vertical .rz-bar-wrapper { 224 | top: auto; 225 | left: 0; 226 | width: 32px; 227 | height: 100%; 228 | padding: 0 0 0 16px; 229 | margin: 0 0 0 -16px; 230 | } 231 | 232 | .rzslider.rz-vertical .rz-bar { 233 | bottom: 0; 234 | left: auto; 235 | width: 4px; 236 | height: 100%; 237 | } 238 | 239 | .rzslider.rz-vertical .rz-pointer { 240 | top: auto; 241 | bottom: 0; 242 | left: -14px !important; 243 | } 244 | 245 | .rzslider.rz-vertical .rz-bubble { 246 | bottom: 0; 247 | left: 16px !important; 248 | margin-left: 3px; 249 | } 250 | 251 | .rzslider.rz-vertical .rz-ticks { 252 | top: 0; 253 | left: -3px; 254 | z-index: 1; 255 | width: 0; 256 | height: 100%; 257 | } 258 | 259 | .rzslider.rz-vertical .rz-tick { 260 | margin-top: 11px; 261 | margin-left: auto; 262 | vertical-align: middle; 263 | } 264 | 265 | .rzslider.rz-vertical .rz-tick-value { 266 | top: auto; 267 | left: 24px; 268 | transform: translate(0, -28%); 269 | } 270 | 271 | .rzslider.rz-vertical .rz-tick-legend { 272 | top: auto; 273 | right: 24px; 274 | max-width: none; 275 | white-space: nowrap; 276 | transform: translate(0, -28%); 277 | } 278 | 279 | .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value { 280 | right: 24px; 281 | bottom: auto; 282 | left: auto; 283 | } 284 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJ6c2xpZGVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O2NBR2M7QUFDZDtFQUNFLG1CQUFtQjtFQUNuQixzQkFBc0I7RUFDdEIsWUFBWTtFQUNaLFlBQVk7RUFDWixzQkFBc0I7RUFDdEIsdUJBQXVCO0VBQ3ZCLDBCQUFrQjtLQUFsQix1QkFBa0I7TUFBbEIsc0JBQWtCO1VBQWxCLGtCQUFrQjtDQUNuQjs7QUFFRDtFQUNFLDRCQUE0QjtDQUM3Qjs7QUFFRDtFQUNFLG9CQUFvQjtDQUNyQjs7QUFFRDtFQUNFLG9CQUFvQjtDQUNyQjs7QUFFRDtFQUNFLG9CQUFvQjtFQUNwQiwwQkFBMEI7Q0FDM0I7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxtQkFBbUI7RUFDbkIsc0JBQXNCO0VBQ3RCLG9CQUFvQjtDQUNyQjs7QUFFRDtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsV0FBVztDQUNaOztBQUVEO0VBQ0UsUUFBUTtFQUNSLFdBQVc7RUFDWCxZQUFZO0VBQ1osYUFBYTtFQUNiLGtCQUFrQjtFQUNsQixrQkFBa0I7RUFDbEIsdUJBQXVCO0VBQ3ZCLDRCQUE0QjtDQUM3Qjs7QUFFRDtFQUNFLGFBQWE7Q0FDZDs7QUFFRDtFQUNFLFFBQVE7RUFDUixXQUFXO0VBQ1gsWUFBWTtFQUNaLFlBQVk7RUFDWixvQkFBb0I7RUFHWixtQkFBbUI7Q0FDNUI7O0FBRUQ7RUFDRSx3QkFBd0I7Q0FDekI7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxXQUFXO0VBQ1gsb0JBQW9CO0VBR1osbUJBQW1CO0VBQzNCLHlDQUF5QztDQUMxQzs7QUFFRDtFQUNFLFdBQVc7RUFDWCxvQkFBb0I7RUFHWixtQkFBbUI7Q0FDNUI7O0FBRUQ7RUFDRSxXQUFXO0VBQ1gsV0FBVztFQUNYLFlBQVk7RUFDWixhQUFhO0VBQ2IsZ0JBQWdCO0VBQ2hCLDBCQUEwQjtFQUdsQixvQkFBb0I7RUFDNUIsNEJBQTRCO0NBQzdCOztBQUVEO0VBQ0UsbUJBQW1CO0VBQ25CLFVBQVU7RUFDVixXQUFXO0VBQ1gsV0FBVztFQUNYLFlBQVk7RUFDWixvQkFBb0I7RUFHWixtQkFBbUI7RUFDM0IsWUFBWTtDQUNiOztBQUVEO0VBQ0UsMEJBQTBCO0NBQzNCOztBQUVEO0VBQ0UsV0FBVztDQUNaOztBQUVEO0VBQ0UsMEJBQTBCO0NBQzNCOztBQUVEO0VBQ0UsYUFBYTtFQUNiLGlCQUFpQjtFQUNqQixlQUFlO0VBQ2YsZ0JBQWdCO0VBQ2hCLDRCQUE0QjtDQUM3Qjs7QUFFRDtFQUNFLGVBQWU7RUFDZixpQkFBaUI7Q0FDbEI7O0FBRUQ7RUFDRSxtQkFBbUI7RUFDbkIsVUFBVTtFQUNWLFFBQVE7RUFDUixXQUFXO0VBQ1gsWUFBWTtFQUNaLFVBQVU7RUFDVixVQUFVO0VBQ1YsaUJBQWlCO0VBQ2pCLHVCQUF1QjtDQUN4Qjs7QUFFRDtFQUNFLFVBQVU7RUFDVixjQUFjO0NBQ2Y7O0FBRUQ7RUFDRSxtQkFBbUI7RUFDbkIsT0FBTztFQUNQLFFBQVE7RUFDUixZQUFZO0VBQ1osYUFBYTtFQUNiLGtCQUFrQjtFQUNsQixtQkFBbUI7RUFDbkIsZ0JBQWdCO0VBQ2hCLG9CQUFvQjtFQUNwQixtQkFBbUI7RUFDbkIseUNBQXlDO0NBQzFDOztBQUVEO0VBQ0Usb0JBQW9CO0NBQ3JCOztBQUVEO0VBQ0UsbUJBQW1CO0VBQ25CLFdBQVc7RUFDWCw4QkFBOEI7Q0FDL0I7O0FBRUQ7RUFDRSxtQkFBbUI7RUFDbkIsVUFBVTtFQUNWLGdCQUFnQjtFQUNoQixvQkFBb0I7RUFDcEIsOEJBQThCO0NBQy9COztBQUVEO0VBQ0UsbUJBQW1CO0VBQ25CLFdBQVc7RUFDWCxhQUFhO0VBQ2IsV0FBVztFQUNYLGVBQWU7RUFDZix5QkFBeUI7Q0FDMUI7O0FBRUQ7RUFDRSxZQUFZO0VBQ1osYUFBYTtFQUNiLFdBQVc7Q0FDWjs7QUFFRDtFQUNFLFVBQVU7RUFDVixRQUFRO0VBQ1IsWUFBWTtFQUNaLGFBQWE7RUFDYixvQkFBb0I7RUFDcEIsb0JBQW9CO0NBQ3JCOztBQUVEO0VBQ0UsVUFBVTtFQUNWLFdBQVc7RUFDWCxXQUFXO0VBQ1gsYUFBYTtDQUNkOztBQUVEO0VBQ0UsVUFBVTtFQUNWLFVBQVU7RUFDVix1QkFBdUI7Q0FDeEI7O0FBRUQ7RUFDRSxVQUFVO0VBQ1Ysc0JBQXNCO0VBQ3RCLGlCQUFpQjtDQUNsQjs7QUFFRDtFQUNFLE9BQU87RUFDUCxXQUFXO0VBQ1gsV0FBVztFQUNYLFNBQVM7RUFDVCxhQUFhO0NBQ2Q7O0FBRUQ7RUFDRSxpQkFBaUI7RUFDakIsa0JBQWtCO0VBQ2xCLHVCQUF1QjtDQUN4Qjs7QUFFRDtFQUNFLFVBQVU7RUFDVixXQUFXO0VBQ1gsOEJBQThCO0NBQy9COztBQUVEO0VBQ0UsVUFBVTtFQUNWLFlBQVk7RUFDWixnQkFBZ0I7RUFDaEIsb0JBQW9CO0VBQ3BCLDhCQUE4QjtDQUMvQjs7QUFFRDtFQUNFLFlBQVk7RUFDWixhQUFhO0VBQ2IsV0FBVztDQUNaIiwiZmlsZSI6InJ6c2xpZGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qISBhbmd1bGFyanMtc2xpZGVyIC0gdjcuMS4wIC0gXG4gKGMpIFJhZmFsIFphamFjIDxyemFqYWNAZ21haWwuY29tPiwgVmFsZW50aW4gSGVydmlldSA8dmFsZW50aW5AaGVydmkuZXU+LCBKdXNzaSBTYWFyaXZpcnRhIDxqdXNhc2lAZ21haWwuY29tPiwgQW5nZWxpbiBTaXJidSA8YW5nZWxpbi5zaXJidUBnbWFpbC5jb20+IC0gXG4gaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXItc2xpZGVyL2FuZ3VsYXJqcy1zbGlkZXIgLSBcbiAyMDIyLTA1LTI2ICovXG4ucnpzbGlkZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNHB4O1xuICBtYXJnaW46IDM1cHggMCAxNXB4IDA7XG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG4ucnpzbGlkZXIubm9hbmltYXRlICoge1xuICB0cmFuc2l0aW9uOiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi5yenNsaWRlci53aXRoLWxlZ2VuZCB7XG4gIG1hcmdpbi1ib3R0b206IDQwcHg7XG59XG5cbi5yenNsaWRlcltkaXNhYmxlZF0ge1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuXG4ucnpzbGlkZXJbZGlzYWJsZWRdIC5yei1wb2ludGVyIHtcbiAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2Q4ZTBmMztcbn1cblxuLnJ6c2xpZGVyW2Rpc2FibGVkXSAucnotZHJhZ2dhYmxlIHtcbiAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbn1cblxuLnJ6c2xpZGVyW2Rpc2FibGVkXSAucnotc2VsZWN0aW9uIHtcbiAgYmFja2dyb3VuZDogIzhiOTFhMjtcbn1cblxuLnJ6c2xpZGVyW2Rpc2FibGVkXSAucnotdGljayB7XG4gIGN1cnNvcjogbm90LWFsbG93ZWQ7XG59XG5cbi5yenNsaWRlcltkaXNhYmxlZF0gLnJ6LXRpY2sucnotc2VsZWN0ZWQge1xuICBiYWNrZ3JvdW5kOiAjOGI5MWEyO1xufVxuXG4ucnpzbGlkZXIgc3BhbiB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuXG4ucnpzbGlkZXIgLnJ6LWJhc2Uge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucnpzbGlkZXIgLnJ6LWJhci13cmFwcGVyIHtcbiAgbGVmdDogMDtcbiAgei1pbmRleDogMTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMzJweDtcbiAgcGFkZGluZy10b3A6IDE2cHg7XG4gIG1hcmdpbi10b3A6IC0xNnB4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICB0cmFuc2l0aW9uOiBhbGwgbGluZWFyIDAuM3M7XG59XG5cbi5yenNsaWRlciAucnotZHJhZ2dhYmxlIHtcbiAgY3Vyc29yOiBtb3ZlO1xufVxuXG4ucnpzbGlkZXIgLnJ6LWJhciB7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDE7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDRweDtcbiAgYmFja2dyb3VuZDogI2Q4ZTBmMztcbiAgLXdlYmtpdC1ib3JkZXItcmFkaXVzOiAycHg7XG4gICAgIC1tb3otYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbn1cblxuLnJ6c2xpZGVyIC5yei1iYXItd3JhcHBlci5yei10cmFuc3BhcmVudCAucnotYmFyIHtcbiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG59XG5cbi5yenNsaWRlciAucnotYmFyLXdyYXBwZXIucnotbGVmdC1vdXQtc2VsZWN0aW9uIC5yei1iYXIge1xuICBiYWNrZ3JvdW5kOiAjZGYwMDJkO1xufVxuXG4ucnpzbGlkZXIgLnJ6LWJhci13cmFwcGVyLnJ6LXJpZ2h0LW91dC1zZWxlY3Rpb24gLnJ6LWJhciB7XG4gIGJhY2tncm91bmQ6ICMwM2E2ODg7XG59XG5cbi5yenNsaWRlciAucnotc2VsZWN0aW9uIHtcbiAgei1pbmRleDogMjtcbiAgYmFja2dyb3VuZDogIzBkYjlmMDtcbiAgLXdlYmtpdC1ib3JkZXItcmFkaXVzOiAycHg7XG4gICAgIC1tb3otYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciBsaW5lYXIgMC4zcztcbn1cblxuLnJ6c2xpZGVyIC5yei1yZXN0cmljdGVkIHtcbiAgei1pbmRleDogMztcbiAgYmFja2dyb3VuZDogI2ZmMDAwMDtcbiAgLXdlYmtpdC1ib3JkZXItcmFkaXVzOiAycHg7XG4gICAgIC1tb3otYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbn1cblxuLnJ6c2xpZGVyIC5yei1wb2ludGVyIHtcbiAgdG9wOiAtMTRweDtcbiAgei1pbmRleDogMztcbiAgd2lkdGg6IDMycHg7XG4gIGhlaWdodDogMzJweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMGRiOWYwO1xuICAtd2Via2l0LWJvcmRlci1yYWRpdXM6IDE2cHg7XG4gICAgIC1tb3otYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICB0cmFuc2l0aW9uOiBhbGwgbGluZWFyIDAuM3M7XG59XG5cbi5yenNsaWRlciAucnotcG9pbnRlcjphZnRlciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAxMnB4O1xuICBsZWZ0OiAxMnB4O1xuICB3aWR0aDogOHB4O1xuICBoZWlnaHQ6IDhweDtcbiAgYmFja2dyb3VuZDogI2ZmZmZmZjtcbiAgLXdlYmtpdC1ib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgIC1tb3otYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgY29udGVudDogJyc7XG59XG5cbi5yenNsaWRlciAucnotcG9pbnRlcjpob3ZlcjphZnRlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG59XG5cbi5yenNsaWRlciAucnotcG9pbnRlci5yei1hY3RpdmUge1xuICB6LWluZGV4OiA0O1xufVxuXG4ucnpzbGlkZXIgLnJ6LXBvaW50ZXIucnotYWN0aXZlOmFmdGVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzQ1MWFmZjtcbn1cblxuLnJ6c2xpZGVyIC5yei1idWJibGUge1xuICBib3R0b206IDE2cHg7XG4gIHBhZGRpbmc6IDFweCAzcHg7XG4gIGNvbG9yOiAjNTU2MzdkO1xuICBjdXJzb3I6IGRlZmF1bHQ7XG4gIHRyYW5zaXRpb246IGFsbCBsaW5lYXIgMC4zcztcbn1cblxuLnJ6c2xpZGVyIC5yei1idWJibGUucnotbGltaXQge1xuICBjb2xvcjogIzU1NjM3ZDtcbiAgdHJhbnNpdGlvbjogbm9uZTtcbn1cblxuLnJ6c2xpZGVyIC5yei10aWNrcyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtM3B4O1xuICBsZWZ0OiAwO1xuICB6LWluZGV4OiAxO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAwO1xuICBtYXJnaW46IDA7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG5cbi5yenNsaWRlciAucnotdGlja3MtdmFsdWVzLXVuZGVyIC5yei10aWNrLXZhbHVlIHtcbiAgdG9wOiBhdXRvO1xuICBib3R0b206IC0zMnB4O1xufVxuXG4ucnpzbGlkZXIgLnJ6LXRpY2sge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgd2lkdGg6IDEwcHg7XG4gIGhlaWdodDogMTBweDtcbiAgbWFyZ2luLWxlZnQ6IDExcHg7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBiYWNrZ3JvdW5kOiAjZDhlMGYzO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgbGluZWFyIDAuM3M7XG59XG5cbi5yenNsaWRlciAucnotdGljay5yei1zZWxlY3RlZCB7XG4gIGJhY2tncm91bmQ6ICMwZGI5ZjA7XG59XG5cbi5yenNsaWRlciAucnotdGljay12YWx1ZSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAtMzBweDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG59XG5cbi5yenNsaWRlciAucnotdGljay1sZWdlbmQge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMjRweDtcbiAgbWF4LXdpZHRoOiA1MHB4O1xuICB3aGl0ZS1zcGFjZTogbm9ybWFsO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNTAlLCAwKTtcbn1cblxuLnJ6c2xpZGVyLnJ6LXZlcnRpY2FsIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogNHB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMCAyMHB4O1xuICB2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7XG59XG5cbi5yenNsaWRlci5yei12ZXJ0aWNhbCAucnotYmFzZSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5yenNsaWRlci5yei12ZXJ0aWNhbCAucnotYmFyLXdyYXBwZXIge1xuICB0b3A6IGF1dG87XG4gIGxlZnQ6IDA7XG4gIHdpZHRoOiAzMnB4O1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAgMCAwIDE2cHg7XG4gIG1hcmdpbjogMCAwIDAgLTE2cHg7XG59XG5cbi5yenNsaWRlci5yei12ZXJ0aWNhbCAucnotYmFyIHtcbiAgYm90dG9tOiAwO1xuICBsZWZ0OiBhdXRvO1xuICB3aWR0aDogNHB4O1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5yenNsaWRlci5yei12ZXJ0aWNhbCAucnotcG9pbnRlciB7XG4gIHRvcDogYXV0bztcbiAgYm90dG9tOiAwO1xuICBsZWZ0OiAtMTRweCAhaW1wb3J0YW50O1xufVxuXG4ucnpzbGlkZXIucnotdmVydGljYWwgLnJ6LWJ1YmJsZSB7XG4gIGJvdHRvbTogMDtcbiAgbGVmdDogMTZweCAhaW1wb3J0YW50O1xuICBtYXJnaW4tbGVmdDogM3B4O1xufVxuXG4ucnpzbGlkZXIucnotdmVydGljYWwgLnJ6LXRpY2tzIHtcbiAgdG9wOiAwO1xuICBsZWZ0OiAtM3B4O1xuICB6LWluZGV4OiAxO1xuICB3aWR0aDogMDtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4ucnpzbGlkZXIucnotdmVydGljYWwgLnJ6LXRpY2sge1xuICBtYXJnaW4tdG9wOiAxMXB4O1xuICBtYXJnaW4tbGVmdDogYXV0bztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnJ6c2xpZGVyLnJ6LXZlcnRpY2FsIC5yei10aWNrLXZhbHVlIHtcbiAgdG9wOiBhdXRvO1xuICBsZWZ0OiAyNHB4O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLCAtMjglKTtcbn1cblxuLnJ6c2xpZGVyLnJ6LXZlcnRpY2FsIC5yei10aWNrLWxlZ2VuZCB7XG4gIHRvcDogYXV0bztcbiAgcmlnaHQ6IDI0cHg7XG4gIG1heC13aWR0aDogbm9uZTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgLTI4JSk7XG59XG5cbi5yenNsaWRlci5yei12ZXJ0aWNhbCAucnotdGlja3MtdmFsdWVzLXVuZGVyIC5yei10aWNrLXZhbHVlIHtcbiAgcmlnaHQ6IDI0cHg7XG4gIGJvdHRvbTogYXV0bztcbiAgbGVmdDogYXV0bztcbn0iXX0= */ -------------------------------------------------------------------------------- /dist/rzslider.min.css: -------------------------------------------------------------------------------- 1 | /*! angularjs-slider - v7.1.0 - (c) Rafal Zajac , Valentin Hervieu , Jussi Saarivirta , Angelin Sirbu - https://github.com/angular-slider/angularjs-slider - 2022-05-26 */ 2 | .rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;user-select:none}.rzslider.noanimate *{transition:none!important}.rzslider.with-legend{margin-bottom:40px}.rzslider[disabled]{cursor:not-allowed}.rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}.rzslider[disabled] .rz-draggable{cursor:not-allowed}.rzslider[disabled] .rz-selection{background:#8b91a2}.rzslider[disabled] .rz-tick{cursor:not-allowed}.rzslider[disabled] .rz-tick.rz-selected{background:#8b91a2}.rzslider span{position:absolute;display:inline-block;white-space:nowrap}.rzslider .rz-base{width:100%;height:100%;padding:0}.rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box;transition:all linear .3s}.rzslider .rz-draggable{cursor:move}.rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-bar-wrapper.rz-transparent .rz-bar{background:transparent}.rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar{background:#df002d}.rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar{background:#03a688}.rzslider .rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;transition:background-color linear .3s}.rzslider .rz-restricted{z-index:3;background:#f00;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;transition:all linear .3s}.rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}.rzslider .rz-pointer:hover:after{background-color:#fff}.rzslider .rz-pointer.rz-active{z-index:4}.rzslider .rz-pointer.rz-active:after{background-color:#451aff}.rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default;transition:all linear .3s}.rzslider .rz-bubble.rz-limit{color:#55637d;transition:none}.rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;width:100%;height:0;margin:0;list-style:none;box-sizing:border-box}.rzslider .rz-ticks-values-under .rz-tick-value{top:auto;bottom:-32px}.rzslider .rz-tick{position:absolute;top:0;left:0;width:10px;height:10px;margin-left:11px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%;transition:background-color linear .3s}.rzslider .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%}.rzslider.rz-vertical .rz-tick{margin-top:11px;margin-left:auto;vertical-align:middle}.rzslider.rz-vertical .rz-tick-value{top:auto;left:24px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-tick-legend{top:auto;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value{right:24px;bottom:auto;left:auto} -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (config) { 4 | config.set({ 5 | // base path, that will be used to resolve files and exclude 6 | basePath: '', 7 | 8 | // testing framework to use (jasmine/mocha/qunit/...) 9 | frameworks: ['mocha', 'sinon', 'chai'], 10 | 11 | reporters: ['mocha', 'coverage'], 12 | 13 | mochaReporter: { 14 | showDiff: true 15 | }, 16 | 17 | // list of files / patterns to load in the browser 18 | files: [ 19 | 'node_modules/angular/angular.js', 20 | 'node_modules/angular-mocks/angular-mocks.js', 21 | 'src/*.js', 22 | 'tests/specs/helper.js', 23 | 'tests/specs/**/*-test.js', 24 | 'tests/specs/*.html', 25 | 'dist/rzslider.css', 26 | 'src/*.html' 27 | ], 28 | 29 | // list of files / patterns to exclude 30 | exclude: [], 31 | 32 | // preprocess matching files before serving them to the browser 33 | preprocessors: { 34 | "src/*.js": ['coverage'], 35 | "src/*Tpl.html": 'ng-html2js', 36 | "tests/specs/*-tpl.html": 'ng-html2js' 37 | }, 38 | 39 | ngHtml2JsPreprocessor: { 40 | stripPrefix: 'src/', 41 | moduleName: 'appTemplates' 42 | }, 43 | 44 | // web server port 45 | port: 9998, 46 | 47 | // level of logging 48 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 49 | logLevel: config.LOG_INFO, 50 | 51 | 52 | // enable / disable watching file and executing tests whenever any file changes 53 | autoWatch: false, 54 | 55 | coverageReporter: { 56 | // specify a common output directory 57 | dir: 'tests/coverage', 58 | type: 'lcov', 59 | subdir: '.' 60 | }, 61 | 62 | // Start these browsers, currently available: 63 | // - Chrome 64 | // - ChromeCanary 65 | // - Firefox 66 | // - Opera 67 | // - Safari (only Mac) 68 | // - PhantomJS 69 | // - IE (only Windows) 70 | browsers: ['PhantomJS'], 71 | 72 | // Continuous Integration mode 73 | // if true, it capture browsers, run tests and exit 74 | singleRun: false 75 | }) 76 | ; 77 | } 78 | ; 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angularjs-slider", 3 | "version": "7.1.0", 4 | "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.", 5 | "main": "dist/rzslider.js", 6 | "types": "dist/rzslider.d.ts", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/angular-slider/angularjs-slider" 10 | }, 11 | "keywords": [ 12 | "angular", 13 | "slider" 14 | ], 15 | "publishConfig": { 16 | "registry": "https://registry.npmjs.org/" 17 | }, 18 | "scripts": { 19 | "start": "http-server ./ -c-1", 20 | "commit": "git-cz", 21 | "build": "grunt", 22 | "test": "grunt test", 23 | "report-coverage": "cat ./tests/coverage/lcov.info | codecov", 24 | "format": "prettier --write \"{src,tests,demo}/{,!(lib)/**}/*.{js,less,css}\"", 25 | "precommit": "npm run build && git add dist && lint-staged", 26 | "e2e": "npm start & cypress run", 27 | "cypress:open": "cypress open" 28 | }, 29 | "lint-staged": { 30 | "{src,tests,demo}/{,!(lib)/**}/*.{js,less,css}": [ 31 | "prettier --write", 32 | "git add" 33 | ] 34 | }, 35 | "peerDependencies": { 36 | "angular": "^1.2.x" 37 | }, 38 | "devDependencies": { 39 | "angular": "1.4.7", 40 | "angular-mocks": "1.4.8", 41 | "autoprefixer": "^6.5.3", 42 | "chai": "^3.5.0", 43 | "codecov.io": "^0.1.6", 44 | "commitizen": "^2.4.6", 45 | "cypress": "^0.20.3", 46 | "cz-conventional-changelog": "^1.1.5", 47 | "grunt": "~0.4.2", 48 | "grunt-angular-templates": "^0.5.7", 49 | "grunt-cli": "^1.2.0", 50 | "grunt-contrib-concat": "^0.5.1", 51 | "grunt-contrib-copy": "^1.0.0", 52 | "grunt-contrib-mincss": "~0.3.2", 53 | "grunt-contrib-uglify": "~0.2.2", 54 | "grunt-contrib-watch": "^0.6.1", 55 | "grunt-karma": "^0.12.1", 56 | "grunt-ng-annotate": "^1.0.1", 57 | "grunt-postcss": "^0.8.0", 58 | "grunt-recess": "~0.4.0", 59 | "grunt-replace": "^0.11.0", 60 | "grunt-serve": "^0.1.6", 61 | "http-server": "^0.10.0", 62 | "husky": "^0.14.3", 63 | "karma": "^1.3.0", 64 | "karma-chai": "^0.1.0", 65 | "karma-chrome-launcher": "^0.2.2", 66 | "karma-coverage": "^0.5.3", 67 | "karma-mocha": "^0.2.1", 68 | "karma-mocha-reporter": "^2.2.0", 69 | "karma-ng-html2js-preprocessor": "^0.2.0", 70 | "karma-phantomjs-launcher": "^1.0.2", 71 | "karma-sinon": "^1.0.4", 72 | "lint-staged": "^4.0.3", 73 | "mocha": "^3.1.2", 74 | "phantomjs": "^1.9.19", 75 | "prettier": "^1.13.7", 76 | "recess": "~1.1.9", 77 | "sinon": "^1.17.2" 78 | }, 79 | "author": "Rafal Zajac , Valentin Hervieu , Jussi Saarivirta , Angelin Sirbu ", 80 | "license": "MIT", 81 | "readmeFilename": "README.md", 82 | "config": { 83 | "commitizen": { 84 | "path": "node_modules/cz-conventional-changelog" 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/rzSliderTpl.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
    38 |
  • 40 | {{ t.value }} 41 | {{ t.legend }} 42 |
    • 43 |
44 |
45 | -------------------------------------------------------------------------------- /src/rzslider.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Angular JS slider directive 3 | * 4 | * (c) Rafal Zajac 5 | * (c) Valentin Hervieu 6 | * http://github.com/angular-slider/angularjs-slider 7 | * 8 | * Licensed under the MIT license 9 | */ 10 | @import 'variables.less'; 11 | 12 | .rzslider { 13 | display: inline-block; 14 | position: relative; 15 | height: @barDimension; 16 | width: 100%; 17 | margin: 35px 0 15px 0; 18 | vertical-align: middle; 19 | user-select: none; 20 | 21 | &.noanimate * { 22 | transition: none !important; 23 | } 24 | 25 | &.with-legend { 26 | margin-bottom: @withLegendMargin; 27 | } 28 | 29 | &[disabled] { 30 | cursor: not-allowed; 31 | .rz-pointer { 32 | cursor: not-allowed; 33 | background-color: @handleDisabledColor; 34 | } 35 | .rz-draggable { 36 | cursor: not-allowed; 37 | } 38 | .rz-selection { 39 | background: @barDisabledFillColor; 40 | } 41 | .rz-tick { 42 | cursor: not-allowed; 43 | &.rz-selected { 44 | background: @barDisabledFillColor; 45 | } 46 | } 47 | } 48 | 49 | span { 50 | white-space: nowrap; 51 | position: absolute; 52 | display: inline-block; 53 | } 54 | 55 | .rz-base { 56 | width: 100%; 57 | height: 100%; 58 | padding: 0; 59 | } 60 | 61 | .rz-bar-wrapper { 62 | left: 0; 63 | box-sizing: border-box; 64 | margin-top: (-@handleSize / 2); 65 | padding-top: (@handleSize / 2); 66 | width: 100%; 67 | height: @handleSize; 68 | z-index: 1; 69 | transition: all linear @animationDuration; 70 | } 71 | 72 | .rz-draggable { 73 | cursor: move; 74 | } 75 | 76 | .rz-bar { 77 | left: 0; 78 | width: 100%; 79 | height: @barDimension; 80 | z-index: 1; 81 | background: @barNormalColor; 82 | .rounded((@barDimension / 2)); 83 | } 84 | 85 | .rz-bar-wrapper.rz-transparent .rz-bar { 86 | background: transparent; 87 | } 88 | .rz-bar-wrapper.rz-left-out-selection .rz-bar { 89 | background: @barLeftOutSelectionColor; 90 | } 91 | .rz-bar-wrapper.rz-right-out-selection .rz-bar { 92 | background: @barRightOutSelectionColor; 93 | } 94 | 95 | .rz-selection { 96 | z-index: 2; 97 | background: @barFillColor; 98 | .rounded((@barDimension / 2)); 99 | transition: background-color linear @animationDuration; 100 | } 101 | 102 | .rz-restricted { 103 | z-index: 3; 104 | background: @restrictedBarColor; 105 | .rounded((@barDimension / 2)); 106 | } 107 | 108 | .rz-pointer { 109 | cursor: pointer; 110 | width: @handleSize; 111 | height: @handleSize; 112 | top: (-@handleSize / 2 + @barDimension / 2); 113 | background-color: @handleBgColor; 114 | z-index: 3; 115 | .rounded((@handleSize / 2)); 116 | transition: all linear @animationDuration; 117 | 118 | &:after { 119 | content: ''; 120 | width: @handlePointerSize; 121 | height: @handlePointerSize; 122 | position: absolute; 123 | top: (@handleSize / 2 - @handlePointerSize / 2); 124 | left: (@handleSize / 2 - @handlePointerSize / 2); 125 | .rounded((@handlePointerSize / 2)); 126 | background: @handleInnerColor; 127 | } 128 | &:hover:after { 129 | background-color: @handleHoverColor; 130 | } 131 | &.rz-active { 132 | z-index: 4; 133 | &:after { 134 | background-color: @handleActiveColor; 135 | } 136 | } 137 | } 138 | 139 | .rz-bubble { 140 | cursor: default; 141 | bottom: (@handleSize / 2); 142 | padding: @bubblePadding; 143 | color: @labelTextColor; 144 | transition: all linear @animationDuration; 145 | &.rz-limit { 146 | color: @limitLabelTextColor; 147 | transition: none; 148 | } 149 | } 150 | 151 | .rz-ticks { 152 | box-sizing: border-box; 153 | width: 100%; 154 | height: 0; 155 | position: absolute; 156 | left: 0; 157 | top: (-(@ticksHeight - @barDimension) / 2); 158 | margin: 0; 159 | z-index: 1; 160 | list-style: none; 161 | } 162 | 163 | .rz-ticks-values-under { 164 | .rz-tick-value { 165 | top: auto; 166 | bottom: (@ticksValuePosition - 2); 167 | } 168 | } 169 | 170 | .rz-tick { 171 | text-align: center; 172 | cursor: pointer; 173 | width: @ticksWidth; 174 | height: @ticksHeight; 175 | background: @ticksColor; 176 | border-radius: 50%; 177 | position: absolute; 178 | top: 0; 179 | left: 0; 180 | margin-left: (@handleSize / 2 - @ticksWidth / 2); // for centering 181 | transition: background-color linear @animationDuration; 182 | &.rz-selected { 183 | background: @selectedTicksColor; 184 | } 185 | } 186 | 187 | .rz-tick-value { 188 | position: absolute; 189 | top: @ticksValuePosition; 190 | transform: translate(-50%, 0); 191 | } 192 | 193 | .rz-tick-legend { 194 | position: absolute; 195 | top: @ticksLegendPosition; 196 | transform: translate(-50%, 0); 197 | max-width: 50px; 198 | white-space: normal; 199 | } 200 | 201 | &.rz-vertical { 202 | position: relative; 203 | width: @barDimension; 204 | height: 100%; 205 | margin: 0 20px; 206 | padding: 0; 207 | vertical-align: baseline; 208 | 209 | .rz-base { 210 | width: 100%; 211 | height: 100%; 212 | padding: 0; 213 | } 214 | 215 | .rz-bar-wrapper { 216 | top: auto; 217 | left: 0; 218 | margin: 0 0 0 (-@handleSize / 2); 219 | padding: 0 0 0 (@handleSize / 2); 220 | height: 100%; 221 | width: @handleSize; 222 | } 223 | 224 | .rz-bar { 225 | bottom: 0; 226 | left: auto; 227 | width: @barDimension; 228 | height: 100%; 229 | } 230 | 231 | .rz-pointer { 232 | left: (-@handleSize / 2 + @barDimension / 2) !important; 233 | top: auto; 234 | bottom: 0; 235 | } 236 | 237 | .rz-bubble { 238 | left: (@handleSize / 2) !important; 239 | margin-left: 3px; 240 | bottom: 0; 241 | } 242 | 243 | .rz-ticks { 244 | height: 100%; 245 | width: 0; 246 | left: (-(@ticksHeight - @barDimension) / 2); 247 | top: 0; 248 | z-index: 1; 249 | } 250 | .rz-tick { 251 | vertical-align: middle; 252 | margin-left: auto; 253 | margin-top: (@handleSize / 2 - @ticksWidth / 2); // for centering 254 | } 255 | .rz-tick-value { 256 | left: @ticksValuePositionOnVertical; 257 | top: auto; 258 | transform: translate(0, -28%); 259 | } 260 | .rz-tick-legend { 261 | top: auto; 262 | right: @ticksLegendPosition; 263 | transform: translate(0, -28%); 264 | max-width: none; 265 | white-space: nowrap; 266 | } 267 | .rz-ticks-values-under { 268 | .rz-tick-value { 269 | bottom: auto; 270 | left: auto; 271 | right: @ticksValuePositionOnVertical; 272 | } 273 | } 274 | } 275 | } 276 | -------------------------------------------------------------------------------- /src/variables.less: -------------------------------------------------------------------------------- 1 | .rounded(@radius: 2px) { 2 | -webkit-border-radius: @radius; 3 | -moz-border-radius: @radius; 4 | border-radius: @radius; 5 | } 6 | 7 | @handleActiveColor: #451aff; 8 | @handleHoverColor: #fff; 9 | @labelTextColor: #55637d; 10 | @handleBgColor: #0db9f0; 11 | @handleInnerColor: #fff; 12 | @handleDisabledColor: #d8e0f3; 13 | @limitLabelTextColor: @labelTextColor; 14 | @barFillColor: @handleBgColor; 15 | @barDisabledFillColor: #8b91a2; 16 | @barNormalColor: #d8e0f3; 17 | @barLeftOutSelectionColor: #df002d; 18 | @barRightOutSelectionColor: #03a688; 19 | @restrictedBarColor: red; 20 | 21 | @ticksColor: @barNormalColor; 22 | @selectedTicksColor: @barFillColor; 23 | @ticksWidth: 10px; 24 | @ticksHeight: 10px; 25 | @ticksValuePosition: -30px; 26 | @ticksLegendPosition: 24px; 27 | @ticksValuePositionOnVertical: 24px; 28 | 29 | @handleSize: 32px; 30 | @handlePointerSize: 8px; 31 | @bubblePadding: 1px 3px; 32 | @barDimension: 4px; 33 | 34 | @withLegendMargin: 40px; 35 | 36 | @animationDuration: 0.3s; 37 | -------------------------------------------------------------------------------- /tests/specs/accessibility-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Accessibility - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | it('should have accessible horizontal single slider', function() { 26 | var sliderConf = { 27 | value: 10, 28 | options: { 29 | floor: 0, 30 | ceil: 100, 31 | step: 10, 32 | }, 33 | } 34 | helper.createSlider(sliderConf) 35 | expect(helper.slider.minH.attr('role')).to.equal('slider') 36 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 37 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 38 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 39 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 40 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 41 | 42 | helper.scope.slider.value = 20 43 | helper.scope.$digest() 44 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 45 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 46 | }) 47 | 48 | it('should have accessible vertical single slider', function() { 49 | var sliderConf = { 50 | value: 10, 51 | options: { 52 | floor: 0, 53 | ceil: 100, 54 | step: 10, 55 | vertical: true, 56 | }, 57 | } 58 | helper.createSlider(sliderConf) 59 | expect(helper.slider.minH.attr('role')).to.equal('slider') 60 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 61 | expect(helper.slider.minH.attr('aria-orientation')).to.equal('vertical') 62 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 63 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 64 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 65 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 66 | 67 | helper.scope.slider.value = 20 68 | helper.scope.$digest() 69 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 70 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 71 | }) 72 | 73 | it('should have accessible horizontal range slider', function() { 74 | var sliderConf = { 75 | min: 10, 76 | max: 90, 77 | options: { 78 | floor: 0, 79 | ceil: 100, 80 | step: 10, 81 | }, 82 | } 83 | helper.createRangeSlider(sliderConf) 84 | expect(helper.slider.minH.attr('role')).to.equal('slider') 85 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 86 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 87 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 88 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 89 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 90 | expect(helper.slider.maxH.attr('role')).to.equal('slider') 91 | expect(helper.slider.maxH.attr('tabindex')).to.equal('0') 92 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('90') 93 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('90') 94 | expect(helper.slider.maxH.attr('aria-valuemin')).to.equal('0') 95 | expect(helper.slider.maxH.attr('aria-valuemax')).to.equal('100') 96 | 97 | helper.scope.slider.min = 20 98 | helper.scope.$digest() 99 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 100 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 101 | 102 | helper.scope.slider.max = 80 103 | helper.scope.$digest() 104 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('80') 105 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('80') 106 | }) 107 | 108 | it('should have accessible vertical range slider', function() { 109 | var sliderConf = { 110 | min: 10, 111 | max: 90, 112 | options: { 113 | floor: 0, 114 | ceil: 100, 115 | step: 10, 116 | vertical: true, 117 | }, 118 | } 119 | helper.createRangeSlider(sliderConf) 120 | expect(helper.slider.minH.attr('role')).to.equal('slider') 121 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 122 | expect(helper.slider.minH.attr('aria-orientation')).to.equal('vertical') 123 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 124 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 125 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 126 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 127 | expect(helper.slider.maxH.attr('role')).to.equal('slider') 128 | expect(helper.slider.maxH.attr('tabindex')).to.equal('0') 129 | expect(helper.slider.maxH.attr('aria-orientation')).to.equal('vertical') 130 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('90') 131 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('90') 132 | expect(helper.slider.maxH.attr('aria-valuemin')).to.equal('0') 133 | expect(helper.slider.maxH.attr('aria-valuemax')).to.equal('100') 134 | 135 | helper.scope.slider.min = 20 136 | helper.scope.$digest() 137 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 138 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 139 | 140 | helper.scope.slider.max = 80 141 | helper.scope.$digest() 142 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('80') 143 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('80') 144 | }) 145 | 146 | it('should have accessible horizontal single slider when keyboardSupport is false', function() { 147 | var sliderConf = { 148 | value: 10, 149 | options: { 150 | floor: 0, 151 | ceil: 100, 152 | step: 10, 153 | keyboardSupport: false, 154 | }, 155 | } 156 | helper.createSlider(sliderConf) 157 | expect(helper.slider.minH.attr('role')).to.equal('slider') 158 | expect(helper.slider.minH.attr('tabindex')).to.equal('') 159 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 160 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 161 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 162 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 163 | 164 | helper.scope.slider.value = 20 165 | helper.scope.$digest() 166 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 167 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 168 | }) 169 | 170 | it('should have accessible horizontal range slider when keyboardSupport is false', function() { 171 | var sliderConf = { 172 | min: 10, 173 | max: 90, 174 | options: { 175 | floor: 0, 176 | ceil: 100, 177 | step: 10, 178 | keyboardSupport: false, 179 | }, 180 | } 181 | helper.createRangeSlider(sliderConf) 182 | expect(helper.slider.minH.attr('role')).to.equal('slider') 183 | expect(helper.slider.minH.attr('tabindex')).to.equal('') 184 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('10') 185 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('10') 186 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 187 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('100') 188 | expect(helper.slider.maxH.attr('role')).to.equal('slider') 189 | expect(helper.slider.maxH.attr('tabindex')).to.equal('') 190 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('90') 191 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('90') 192 | expect(helper.slider.maxH.attr('aria-valuemin')).to.equal('0') 193 | expect(helper.slider.maxH.attr('aria-valuemax')).to.equal('100') 194 | 195 | helper.scope.slider.min = 20 196 | helper.scope.$digest() 197 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('20') 198 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('20') 199 | 200 | helper.scope.slider.max = 80 201 | helper.scope.$digest() 202 | expect(helper.slider.maxH.attr('aria-valuenow')).to.equal('80') 203 | expect(helper.slider.maxH.attr('aria-valuetext')).to.equal('80') 204 | }) 205 | 206 | it('should have accessible slider when values are text', function() { 207 | var sliderConf = { 208 | value: 'B', 209 | options: { 210 | stepsArray: ['A', 'B', 'C'], 211 | }, 212 | } 213 | helper.createSlider(sliderConf) 214 | expect(helper.slider.minH.attr('role')).to.equal('slider') 215 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 216 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('B') 217 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('B') 218 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 219 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('2') 220 | 221 | helper.scope.slider.value = 'C' 222 | helper.scope.$digest() 223 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('C') 224 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C') 225 | }) 226 | 227 | it('should have accessible slider when values are text but bindIndexForStepsArray is true', function() { 228 | var sliderConf = { 229 | value: 1, 230 | options: { 231 | stepsArray: ['A', 'B', 'C'], 232 | bindIndexForStepsArray: true, 233 | }, 234 | } 235 | helper.createSlider(sliderConf) 236 | expect(helper.slider.minH.attr('role')).to.equal('slider') 237 | expect(helper.slider.minH.attr('tabindex')).to.equal('0') 238 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('1') 239 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('B') 240 | expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0') 241 | expect(helper.slider.minH.attr('aria-valuemax')).to.equal('2') 242 | 243 | helper.scope.slider.value = 2 244 | helper.scope.$digest() 245 | expect(helper.slider.minH.attr('aria-valuenow')).to.equal('2') 246 | expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C') 247 | }) 248 | 249 | it('should have labelled single slider when option is set', function() { 250 | var sliderConf = { 251 | value: 10, 252 | options: { 253 | floor: 0, 254 | ceil: 100, 255 | step: 10, 256 | ariaLabel: 'test label', 257 | }, 258 | } 259 | helper.createSlider(sliderConf) 260 | expect(helper.slider.minH.attr('aria-label')).to.equal('test label') 261 | }) 262 | 263 | it('should have labelled range slider when option is set', function() { 264 | var sliderConf = { 265 | min: 10, 266 | max: 90, 267 | options: { 268 | floor: 0, 269 | ceil: 100, 270 | step: 10, 271 | ariaLabel: 'test label', 272 | ariaLabelHigh: 'test label high', 273 | }, 274 | } 275 | helper.createRangeSlider(sliderConf) 276 | expect(helper.slider.minH.attr('aria-label')).to.equal('test label') 277 | expect(helper.slider.maxH.attr('aria-label')).to.equal('test label high') 278 | }) 279 | 280 | it('should have labelled by id on single slider when option is set', function() { 281 | var sliderConf = { 282 | value: 10, 283 | options: { 284 | floor: 0, 285 | ceil: 100, 286 | step: 10, 287 | ariaLabelledBy: 'testId', 288 | }, 289 | } 290 | helper.createSlider(sliderConf) 291 | expect(helper.slider.minH.attr('aria-labelledby')).to.equal('testId') 292 | }) 293 | 294 | it('should have labelled by id on range slider when option is set', function() { 295 | var sliderConf = { 296 | min: 10, 297 | max: 90, 298 | options: { 299 | floor: 0, 300 | ceil: 100, 301 | step: 10, 302 | ariaLabelledBy: 'testId', 303 | ariaLabelledByHigh: 'testIdHigh', 304 | }, 305 | } 306 | helper.createRangeSlider(sliderConf) 307 | expect(helper.slider.minH.attr('aria-labelledby')).to.equal('testId') 308 | expect(helper.slider.maxH.attr('aria-labelledby')).to.equal('testIdHigh') 309 | }) 310 | 311 | it('should not have labelled by id on single slider when both options set', function() { 312 | var sliderConf = { 313 | value: 10, 314 | options: { 315 | floor: 0, 316 | ceil: 100, 317 | step: 10, 318 | ariaLabel: 'test label', 319 | ariaLabelledBy: 'testId', 320 | }, 321 | } 322 | helper.createSlider(sliderConf) 323 | expect(helper.slider.minH.attr('aria-label')).to.equal('test label') 324 | expect(helper.slider.minH.attr('aria-labelledby')).to.equal(undefined) 325 | }) 326 | 327 | it('should not have labelled by id on range slider when both options set', function() { 328 | var sliderConf = { 329 | min: 10, 330 | max: 90, 331 | options: { 332 | floor: 0, 333 | ceil: 100, 334 | step: 10, 335 | ariaLabel: 'test label', 336 | ariaLabelHigh: 'test label high', 337 | ariaLabelledBy: 'testId', 338 | ariaLabelledByHigh: 'testIdHigh', 339 | }, 340 | } 341 | helper.createRangeSlider(sliderConf) 342 | expect(helper.slider.minH.attr('aria-label')).to.equal('test label') 343 | expect(helper.slider.maxH.attr('aria-label')).to.equal('test label high') 344 | expect(helper.slider.minH.attr('aria-labelledby')).to.equal(undefined) 345 | expect(helper.slider.maxH.attr('aria-labelledby')).to.equal(undefined) 346 | }) 347 | }) 348 | })() 349 | -------------------------------------------------------------------------------- /tests/specs/custom-template-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Custom templates - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | var url = 'tests/specs/custom-tpl.html' 26 | 27 | it('should render ceil/floor labels', function() { 28 | var sliderConf = { 29 | min: 10, 30 | max: 50, 31 | options: { 32 | floor: 0, 33 | ceil: 100, 34 | step: 10, 35 | }, 36 | } 37 | helper.createRangeSliderWithCustomTemplate(sliderConf, url) 38 | expect(helper.slider.flrLab.text()).to.equal('test- 0') 39 | expect(helper.slider.ceilLab.text()).to.equal('test- 100') 40 | }) 41 | 42 | it('should render min/max labels', function() { 43 | var sliderConf = { 44 | min: 10, 45 | max: 50, 46 | options: { 47 | floor: 0, 48 | ceil: 100, 49 | step: 10, 50 | }, 51 | } 52 | helper.createRangeSliderWithCustomTemplate(sliderConf, url) 53 | expect(helper.slider.minLab.text()).to.equal('test- 10') 54 | expect(helper.slider.maxLab.text()).to.equal('test- 50') 55 | }) 56 | 57 | it('should render min/max labels', function() { 58 | var sliderConf = { 59 | min: 50, 60 | max: 50, 61 | options: { 62 | floor: 0, 63 | ceil: 100, 64 | step: 10, 65 | }, 66 | } 67 | helper.createRangeSliderWithCustomTemplate(sliderConf, url) 68 | expect(helper.slider.cmbLab.text()).to.equal('test- 50 - 50') 69 | }) 70 | }) 71 | })() 72 | -------------------------------------------------------------------------------- /tests/specs/custom-tpl.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | test- {{floorLabel}} 14 | test- {{ceilLabel}} 15 | test- {{modelLabel}} 16 | test- {{highLabel}} 17 | test- {{cmbLabel}} 18 |
    19 |
  • 20 | {{ t.value }} 21 | {{ t.legend }} 22 |
    • 23 |
24 |
25 | -------------------------------------------------------------------------------- /tests/specs/helper.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | var helperModule = angular.module('test-helper', ['rzSlider', 'appTemplates']) 4 | 5 | helperModule.factory('TestHelper', function( 6 | RzSlider, 7 | RzSliderOptions, 8 | $rootScope, 9 | $compile, 10 | $timeout, 11 | $window, 12 | $document 13 | ) { 14 | var h = { 15 | element: null, 16 | scope: null, 17 | parent: null, 18 | } 19 | 20 | h.createSlider = function(sliderObj) { 21 | var template = '' 22 | var optionsExpression = sliderObj.optionsExpression || 'slider.options' 23 | if (sliderObj.options || sliderObj.optionsExpression) 24 | template = 25 | '' 28 | else template = '' 29 | h.initSlider(sliderObj, template) 30 | } 31 | 32 | h.createRangeSlider = function(sliderObj) { 33 | var template = '' 34 | var optionsExpression = sliderObj.optionsExpression || 'slider.options' 35 | if (sliderObj.options || sliderObj.optionsExpression) 36 | template = 37 | '' 41 | else 42 | template = 43 | '' 44 | h.initSlider(sliderObj, template) 45 | } 46 | 47 | h.createRangeSliderWithCustomTemplate = function(sliderObj, templateUrl) { 48 | var template = '' 49 | var optionsExpression = sliderObj.optionsExpression || 'slider.options' 50 | if (sliderObj.options || sliderObj.optionsExpression) 51 | template = 52 | '' 59 | else 60 | template = 61 | '' 62 | h.initSlider(sliderObj, template) 63 | } 64 | 65 | h.initSlider = function(sliderObj, template) { 66 | h.scope = $rootScope.$new() 67 | h.scope.slider = sliderObj 68 | h.parent = angular.element( 69 | '
' 70 | ) 71 | h.element = $compile(template)(h.scope) 72 | h.parent.append(h.element) 73 | angular 74 | .element(document) 75 | .find('body') 76 | .append(h.parent) 77 | h.scope.$digest() 78 | h.slider = h.element.isolateScope().slider 79 | } 80 | 81 | h.clean = function() { 82 | //simulate to $destroy event to clean everything 83 | if (h.scope) h.scope.$broadcast('$destroy') 84 | //clean the element we append at each test 85 | if (h.parent) h.parent.remove() 86 | } 87 | 88 | h.fireMousedown = function(element, position, vertical) { 89 | var positionProp = vertical ? 'clientY' : 'clientX' 90 | var event = { 91 | type: 'mousedown', 92 | preventDefault: sinon.stub(), 93 | stopPropagation: sinon.stub(), 94 | } 95 | event[positionProp] = position 96 | 97 | element.triggerHandler(event) 98 | return event 99 | } 100 | 101 | h.fireMousemove = function(position, vertical) { 102 | var positionProp = vertical ? 'clientY' : 'clientX' 103 | var event = { 104 | type: 'mousemove', 105 | } 106 | event[positionProp] = position 107 | 108 | $document.triggerHandler(event) 109 | } 110 | 111 | h.fireMouseup = function() { 112 | var event = { 113 | type: 'mouseup', 114 | } 115 | $document.triggerHandler(event) 116 | } 117 | 118 | h.fireTouchstartWithOriginalEvent = function( 119 | element, 120 | position, 121 | touchIdentifier, 122 | touchesIds, 123 | vertical 124 | ) { 125 | var event = { 126 | type: 'touchstart', 127 | originalEvent: this.getTouchEvent( 128 | 'touchstart', 129 | position, 130 | vertical, 131 | touchIdentifier, 132 | touchesIds, 133 | sinon.stub() 134 | ), 135 | } 136 | 137 | element.triggerHandler(event) 138 | return event 139 | } 140 | 141 | h.fireTouchstartWithoutOriginalEvent = function( 142 | element, 143 | position, 144 | touchIdentifier, 145 | touchesIds, 146 | vertical 147 | ) { 148 | var event = this.getTouchEvent( 149 | 'touchstart', 150 | position, 151 | vertical, 152 | touchIdentifier, 153 | touchesIds, 154 | sinon.stub() 155 | ) 156 | 157 | element.triggerHandler(event) 158 | return event 159 | } 160 | 161 | h.fireTouchmoveWithOriginalEvent = function( 162 | position, 163 | touchIdentifier, 164 | touchesIds, 165 | vertical 166 | ) { 167 | var event = { 168 | type: 'touchmove', 169 | originalEvent: this.getTouchEvent( 170 | 'touchmove', 171 | position, 172 | vertical, 173 | touchIdentifier, 174 | touchesIds 175 | ), 176 | } 177 | 178 | $document.triggerHandler(event) 179 | return event 180 | } 181 | 182 | h.fireTouchmoveWithoutOriginalEvent = function( 183 | position, 184 | touchIdentifier, 185 | touchesIds, 186 | vertical 187 | ) { 188 | var event = this.getTouchEvent( 189 | 'touchmove', 190 | position, 191 | vertical, 192 | touchIdentifier, 193 | touchesIds 194 | ) 195 | 196 | $document.triggerHandler(event) 197 | return event 198 | } 199 | 200 | h.fireTouchendWithOriginalEvent = function( 201 | touchIdentifier, 202 | touchesIds, 203 | vertical 204 | ) { 205 | var event = { 206 | type: 'touchend', 207 | originalEvent: this.getTouchEvent( 208 | 'touchend', 209 | 0, 210 | vertical, 211 | touchIdentifier, 212 | touchesIds 213 | ), 214 | } 215 | 216 | $document.triggerHandler(event) 217 | return event 218 | } 219 | 220 | h.fireTouchendWithoutOriginalEvent = function( 221 | touchIdentifier, 222 | touchesIds, 223 | vertical 224 | ) { 225 | var event = this.getTouchEvent( 226 | 'touchend', 227 | 0, 228 | vertical, 229 | touchIdentifier, 230 | touchesIds 231 | ) 232 | 233 | $document.triggerHandler(event) 234 | return event 235 | } 236 | 237 | h.getTouchEvent = function( 238 | type, 239 | position, 240 | vertical, 241 | changedTouchId, 242 | touchesIds, 243 | preventDefaultAndStopPropagation 244 | ) { 245 | var positionProp = vertical ? 'clientY' : 'clientX' 246 | 247 | var changedTouches = [{ identifier: changedTouchId }] 248 | changedTouches[0][positionProp] = position 249 | 250 | var touches = [] 251 | for (var i = 0; i < touchesIds.length; i++) { 252 | var touch = { identifier: touchesIds[i] } 253 | if (touch.identifier == changedTouchId) { 254 | touch[positionProp] = position 255 | } 256 | touches.push(touch) 257 | } 258 | 259 | var originalEvent = { 260 | type: type, 261 | preventDefault: preventDefaultAndStopPropagation, 262 | stopPropagation: preventDefaultAndStopPropagation, 263 | changedTouches: changedTouches, 264 | touches: touches, 265 | } 266 | return originalEvent 267 | } 268 | 269 | h.pressKeydown = function(element, key, options) { 270 | options = options || {} 271 | key = key.toUpperCase() 272 | var event = { 273 | type: 'keydown', 274 | } 275 | var keys = { 276 | UP: 38, 277 | DOWN: 40, 278 | LEFT: 37, 279 | RIGHT: 39, 280 | PAGEUP: 33, 281 | PAGEDOWN: 34, 282 | HOME: 36, 283 | END: 35, 284 | SPACE: 32, 285 | } 286 | var keyCode = keys[key] 287 | if (options.oldAPI) event.which = keyCode 288 | else event.keyCode = keyCode 289 | element.triggerHandler(event) 290 | if (options.timeout !== false) $timeout.flush() 291 | } 292 | 293 | h.getMousePosition = function(value) { 294 | return ( 295 | h.slider.valueToPosition(value) + 296 | h.slider.handleHalfDim + 297 | h.slider.sliderElem.rzsp 298 | ) 299 | } 300 | 301 | h.moveMouseToValue = function(value) { 302 | h.fireMousemove(h.getMousePosition(value)) 303 | } 304 | 305 | return h 306 | }) 307 | })() 308 | -------------------------------------------------------------------------------- /tests/specs/keyboard-controls/draggableRangeOnly-range-slider-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Keyboard controls - draggableRangeOnly range slider', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 90, 28 | max: 110, 29 | options: { 30 | floor: 0, 31 | ceil: 200, 32 | draggableRangeOnly: true, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | 38 | it('should increment minH/maxH by 1 when RIGHT is pressed on minH', function() { 39 | helper.slider.minH.triggerHandler('focus') 40 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 41 | expect(helper.scope.slider.min).to.equal(91) 42 | expect(helper.scope.slider.max).to.equal(111) 43 | }) 44 | 45 | it('should increment minH/maxH by 1 when RIGHT is pressed on maxH', function() { 46 | helper.slider.maxH.triggerHandler('focus') 47 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 48 | expect(helper.scope.slider.min).to.equal(91) 49 | expect(helper.scope.slider.max).to.equal(111) 50 | }) 51 | 52 | it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() { 53 | helper.slider.minH.triggerHandler('focus') 54 | helper.pressKeydown(helper.slider.minH, 'LEFT') 55 | expect(helper.scope.slider.min).to.equal(89) 56 | expect(helper.scope.slider.max).to.equal(109) 57 | }) 58 | 59 | it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() { 60 | helper.slider.maxH.triggerHandler('focus') 61 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 62 | expect(helper.scope.slider.min).to.equal(89) 63 | expect(helper.scope.slider.max).to.equal(109) 64 | }) 65 | 66 | it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() { 67 | helper.slider.minH.triggerHandler('focus') 68 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 69 | expect(helper.scope.slider.min).to.equal(110) 70 | expect(helper.scope.slider.max).to.equal(130) 71 | }) 72 | 73 | it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() { 74 | helper.slider.maxH.triggerHandler('focus') 75 | helper.pressKeydown(helper.slider.maxH, 'PAGEUP') 76 | expect(helper.scope.slider.min).to.equal(110) 77 | expect(helper.scope.slider.max).to.equal(130) 78 | }) 79 | 80 | it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() { 81 | helper.slider.minH.triggerHandler('focus') 82 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 83 | expect(helper.scope.slider.min).to.equal(70) 84 | expect(helper.scope.slider.max).to.equal(90) 85 | }) 86 | 87 | it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() { 88 | helper.slider.maxH.triggerHandler('focus') 89 | helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN') 90 | expect(helper.scope.slider.min).to.equal(70) 91 | expect(helper.scope.slider.max).to.equal(90) 92 | }) 93 | 94 | it('should set minH to min when HOME is pressed on minH', function() { 95 | helper.slider.minH.triggerHandler('focus') 96 | helper.pressKeydown(helper.slider.minH, 'HOME') 97 | expect(helper.scope.slider.min).to.equal(0) 98 | expect(helper.scope.slider.max).to.equal(20) 99 | }) 100 | 101 | it('should set minH to min when HOME is pressed on maxH', function() { 102 | helper.slider.maxH.triggerHandler('focus') 103 | helper.pressKeydown(helper.slider.maxH, 'HOME') 104 | expect(helper.scope.slider.min).to.equal(0) 105 | expect(helper.scope.slider.max).to.equal(20) 106 | }) 107 | 108 | it('should set minH to min when END is pressed on minH', function() { 109 | helper.slider.minH.triggerHandler('focus') 110 | helper.pressKeydown(helper.slider.minH, 'END') 111 | expect(helper.scope.slider.min).to.equal(180) 112 | expect(helper.scope.slider.max).to.equal(200) 113 | }) 114 | 115 | it('should set minH to min when END is pressed on maxH', function() { 116 | helper.slider.maxH.triggerHandler('focus') 117 | helper.pressKeydown(helper.slider.maxH, 'END') 118 | expect(helper.scope.slider.min).to.equal(180) 119 | expect(helper.scope.slider.max).to.equal(200) 120 | }) 121 | }) 122 | 123 | describe('Right to left Keyboard controls - draggableRangeOnly range slider', function() { 124 | var helper, RzSliderOptions, $rootScope, $timeout 125 | 126 | beforeEach(module('test-helper')) 127 | 128 | beforeEach(inject(function( 129 | TestHelper, 130 | _RzSliderOptions_, 131 | _$rootScope_, 132 | _$timeout_ 133 | ) { 134 | helper = TestHelper 135 | RzSliderOptions = _RzSliderOptions_ 136 | $rootScope = _$rootScope_ 137 | $timeout = _$timeout_ 138 | })) 139 | 140 | afterEach(function() { 141 | helper.clean() 142 | }) 143 | 144 | beforeEach(function() { 145 | var sliderConf = { 146 | min: 90, 147 | max: 110, 148 | options: { 149 | floor: 0, 150 | ceil: 200, 151 | draggableRangeOnly: true, 152 | rightToLeft: true, 153 | }, 154 | } 155 | helper.createRangeSlider(sliderConf) 156 | }) 157 | 158 | it('should decrement minH/maxH by 1 when RIGHT is pressed on minH', function() { 159 | helper.slider.minH.triggerHandler('focus') 160 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 161 | expect(helper.scope.slider.min).to.equal(89) 162 | expect(helper.scope.slider.max).to.equal(109) 163 | }) 164 | 165 | it('should decrement minH/maxH by 1 when RIGHT is pressed on maxH', function() { 166 | helper.slider.maxH.triggerHandler('focus') 167 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 168 | expect(helper.scope.slider.min).to.equal(89) 169 | expect(helper.scope.slider.max).to.equal(109) 170 | }) 171 | 172 | it('should increment minH/maxH by 1 when LEFT is pressed on minH', function() { 173 | helper.slider.minH.triggerHandler('focus') 174 | helper.pressKeydown(helper.slider.minH, 'LEFT') 175 | expect(helper.scope.slider.min).to.equal(91) 176 | expect(helper.scope.slider.max).to.equal(111) 177 | }) 178 | 179 | it('should increment minH/maxH by 1 when LEFT is pressed on maxH', function() { 180 | helper.slider.maxH.triggerHandler('focus') 181 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 182 | expect(helper.scope.slider.min).to.equal(91) 183 | expect(helper.scope.slider.max).to.equal(111) 184 | }) 185 | 186 | it('should increment minH/maxH by 10% when PAGEUP is pressed on minH', function() { 187 | helper.slider.minH.triggerHandler('focus') 188 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 189 | expect(helper.scope.slider.min).to.equal(110) 190 | expect(helper.scope.slider.max).to.equal(130) 191 | }) 192 | 193 | it('should increment minH/maxH by 10% when PAGEUP is pressed on maxH', function() { 194 | helper.slider.maxH.triggerHandler('focus') 195 | helper.pressKeydown(helper.slider.maxH, 'PAGEUP') 196 | expect(helper.scope.slider.min).to.equal(110) 197 | expect(helper.scope.slider.max).to.equal(130) 198 | }) 199 | 200 | it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on minH', function() { 201 | helper.slider.minH.triggerHandler('focus') 202 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 203 | expect(helper.scope.slider.min).to.equal(70) 204 | expect(helper.scope.slider.max).to.equal(90) 205 | }) 206 | 207 | it('should decrement minH/maxH by 10% when PAGEDOWN is pressed on maxH', function() { 208 | helper.slider.maxH.triggerHandler('focus') 209 | helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN') 210 | expect(helper.scope.slider.min).to.equal(70) 211 | expect(helper.scope.slider.max).to.equal(90) 212 | }) 213 | 214 | it('should set minH to min when HOME is pressed on minH', function() { 215 | helper.slider.minH.triggerHandler('focus') 216 | helper.pressKeydown(helper.slider.minH, 'HOME') 217 | expect(helper.scope.slider.min).to.equal(0) 218 | expect(helper.scope.slider.max).to.equal(20) 219 | }) 220 | 221 | it('should set minH to min when HOME is pressed on maxH', function() { 222 | helper.slider.maxH.triggerHandler('focus') 223 | helper.pressKeydown(helper.slider.maxH, 'HOME') 224 | expect(helper.scope.slider.min).to.equal(0) 225 | expect(helper.scope.slider.max).to.equal(20) 226 | }) 227 | 228 | it('should set minH to min when END is pressed on minH', function() { 229 | helper.slider.minH.triggerHandler('focus') 230 | helper.pressKeydown(helper.slider.minH, 'END') 231 | expect(helper.scope.slider.min).to.equal(180) 232 | expect(helper.scope.slider.max).to.equal(200) 233 | }) 234 | 235 | it('should set minH to min when END is pressed on maxH', function() { 236 | helper.slider.maxH.triggerHandler('focus') 237 | helper.pressKeydown(helper.slider.maxH, 'END') 238 | expect(helper.scope.slider.min).to.equal(180) 239 | expect(helper.scope.slider.max).to.equal(200) 240 | }) 241 | }) 242 | })() 243 | -------------------------------------------------------------------------------- /tests/specs/keyboard-controls/range-slider-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Keyboard controls - range slider', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 50, 28 | max: 100, 29 | options: { 30 | floor: 0, 31 | ceil: 200, 32 | }, 33 | } 34 | helper.createRangeSlider(sliderConf) 35 | }) 36 | 37 | it('should toggle active style when handle focused/blured', function() { 38 | helper.slider.minH.triggerHandler('focus') 39 | expect(helper.slider.minH.hasClass('rz-active')).to.be.true 40 | expect(helper.slider.maxH.hasClass('rz-active')).to.be.false 41 | helper.slider.minH.triggerHandler('blur') 42 | helper.slider.maxH.triggerHandler('focus') 43 | expect(helper.slider.minH.hasClass('rz-active')).to.be.false 44 | expect(helper.slider.maxH.hasClass('rz-active')).to.be.true 45 | helper.slider.maxH.triggerHandler('blur') 46 | expect(helper.slider.minH.hasClass('rz-active')).to.be.false 47 | expect(helper.slider.maxH.hasClass('rz-active')).to.be.false 48 | }) 49 | 50 | it('should increment minH by 1 when RIGHT is pressed', function() { 51 | helper.slider.minH.triggerHandler('focus') 52 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 53 | expect(helper.scope.slider.min).to.equal(51) 54 | }) 55 | 56 | it('should increment maxH by 1 when RIGHT is pressed', function() { 57 | helper.slider.maxH.triggerHandler('focus') 58 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 59 | expect(helper.scope.slider.max).to.equal(101) 60 | }) 61 | 62 | it('should decrement minH by 1 when LEFT is pressed', function() { 63 | helper.slider.minH.triggerHandler('focus') 64 | helper.pressKeydown(helper.slider.minH, 'LEFT') 65 | expect(helper.scope.slider.min).to.equal(49) 66 | }) 67 | 68 | it('should decrement maxH by 1 when LEFT is pressed', function() { 69 | helper.slider.maxH.triggerHandler('focus') 70 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 71 | expect(helper.scope.slider.max).to.equal(99) 72 | }) 73 | 74 | it('should increment minH by 10% when PAGEUP is pressed', function() { 75 | helper.slider.minH.triggerHandler('focus') 76 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 77 | expect(helper.scope.slider.min).to.equal(70) 78 | }) 79 | 80 | it('should increment maxH by 10% when PAGEUP is pressed', function() { 81 | helper.slider.maxH.triggerHandler('focus') 82 | helper.pressKeydown(helper.slider.maxH, 'PAGEUP') 83 | expect(helper.scope.slider.max).to.equal(120) 84 | }) 85 | 86 | it('should decrement minH by 10% when PAGEDOWN is pressed', function() { 87 | helper.slider.minH.triggerHandler('focus') 88 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 89 | expect(helper.scope.slider.min).to.equal(30) 90 | }) 91 | 92 | it('should decrement maxH by 10% when PAGEDOWN is pressed', function() { 93 | helper.slider.maxH.triggerHandler('focus') 94 | helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN') 95 | expect(helper.scope.slider.max).to.equal(80) 96 | }) 97 | 98 | it('should set minH to min when HOME is pressed on minH', function() { 99 | helper.slider.minH.triggerHandler('focus') 100 | helper.pressKeydown(helper.slider.minH, 'HOME') 101 | expect(helper.scope.slider.min).to.equal(0) 102 | }) 103 | 104 | it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() { 105 | helper.slider.maxH.triggerHandler('focus') 106 | helper.pressKeydown(helper.slider.maxH, 'HOME') 107 | expect(helper.scope.slider.min).to.equal(0) 108 | expect(helper.scope.slider.max).to.equal(50) 109 | }) 110 | 111 | it('should set minH value to previous max and switch min/max when END is pressed on minH', function() { 112 | helper.slider.minH.triggerHandler('focus') 113 | helper.pressKeydown(helper.slider.minH, 'END') 114 | expect(helper.scope.slider.min).to.equal(100) 115 | expect(helper.scope.slider.max).to.equal(200) 116 | }) 117 | 118 | it('should set maxH value to max when END is pressed on maxH', function() { 119 | helper.slider.maxH.triggerHandler('focus') 120 | helper.pressKeydown(helper.slider.maxH, 'END') 121 | expect(helper.scope.slider.max).to.equal(200) 122 | }) 123 | 124 | it('should do nothing when SPACE is pressed on minH', function() { 125 | helper.slider.minH.triggerHandler('focus') 126 | helper.pressKeydown(helper.slider.minH, 'SPACE') 127 | expect(helper.scope.slider.min).to.equal(50) 128 | }) 129 | 130 | it('should do nothing when SPACE is pressed on maxH', function() { 131 | helper.slider.maxH.triggerHandler('focus') 132 | helper.pressKeydown(helper.slider.maxH, 'SPACE') 133 | expect(helper.scope.slider.max).to.equal(100) 134 | }) 135 | 136 | it('should not modify minH when keypress but not focused', function() { 137 | helper.slider.minH.triggerHandler('focus') 138 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 139 | expect(helper.scope.slider.min).to.equal(51) 140 | helper.slider.minH.triggerHandler('blur') 141 | helper.pressKeydown(helper.slider.minH, 'RIGHT', { timeout: false }) 142 | expect(helper.scope.slider.min).to.equal(51) 143 | }) 144 | 145 | it('should not modify maxH when keypress but not focused', function() { 146 | helper.slider.maxH.triggerHandler('focus') 147 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 148 | expect(helper.scope.slider.max).to.equal(101) 149 | helper.slider.maxH.triggerHandler('blur') 150 | helper.pressKeydown(helper.slider.maxH, 'RIGHT', { timeout: false }) 151 | expect(helper.scope.slider.max).to.equal(101) 152 | }) 153 | }) 154 | 155 | describe('Right to left Keyboard controls - range slider', function() { 156 | var helper, RzSliderOptions, $rootScope, $timeout 157 | 158 | beforeEach(module('test-helper')) 159 | 160 | beforeEach(inject(function( 161 | TestHelper, 162 | _RzSliderOptions_, 163 | _$rootScope_, 164 | _$timeout_ 165 | ) { 166 | helper = TestHelper 167 | RzSliderOptions = _RzSliderOptions_ 168 | $rootScope = _$rootScope_ 169 | $timeout = _$timeout_ 170 | })) 171 | 172 | afterEach(function() { 173 | helper.clean() 174 | }) 175 | 176 | beforeEach(function() { 177 | var sliderConf = { 178 | min: 50, 179 | max: 100, 180 | options: { 181 | floor: 0, 182 | ceil: 200, 183 | rightToLeft: true, 184 | }, 185 | } 186 | helper.createRangeSlider(sliderConf) 187 | }) 188 | 189 | it('should decrement minH by 1 when RIGHT is pressed', function() { 190 | helper.slider.minH.triggerHandler('focus') 191 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 192 | expect(helper.scope.slider.min).to.equal(49) 193 | }) 194 | 195 | it('should decrement maxH by 1 when RIGHT is pressed', function() { 196 | helper.slider.maxH.triggerHandler('focus') 197 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 198 | expect(helper.scope.slider.max).to.equal(99) 199 | }) 200 | 201 | it('should increment minH by 1 when LEFT is pressed', function() { 202 | helper.slider.minH.triggerHandler('focus') 203 | helper.pressKeydown(helper.slider.minH, 'LEFT') 204 | expect(helper.scope.slider.min).to.equal(51) 205 | }) 206 | 207 | it('should increment maxH by 1 when LEFT is pressed', function() { 208 | helper.slider.maxH.triggerHandler('focus') 209 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 210 | expect(helper.scope.slider.max).to.equal(101) 211 | }) 212 | 213 | it('should increment minH by 10% when PAGEUP is pressed', function() { 214 | helper.slider.minH.triggerHandler('focus') 215 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 216 | expect(helper.scope.slider.min).to.equal(70) 217 | }) 218 | 219 | it('should increment maxH by 10% when PAGEUP is pressed', function() { 220 | helper.slider.maxH.triggerHandler('focus') 221 | helper.pressKeydown(helper.slider.maxH, 'PAGEUP') 222 | expect(helper.scope.slider.max).to.equal(120) 223 | }) 224 | 225 | it('should decrement minH by 10% when PAGEDOWN is pressed', function() { 226 | helper.slider.minH.triggerHandler('focus') 227 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 228 | expect(helper.scope.slider.min).to.equal(30) 229 | }) 230 | 231 | it('should decrement maxH by 10% when PAGEDOWN is pressed', function() { 232 | helper.slider.maxH.triggerHandler('focus') 233 | helper.pressKeydown(helper.slider.maxH, 'PAGEDOWN') 234 | expect(helper.scope.slider.max).to.equal(80) 235 | }) 236 | 237 | it('should set minH to min when HOME is pressed on minH', function() { 238 | helper.slider.minH.triggerHandler('focus') 239 | helper.pressKeydown(helper.slider.minH, 'HOME') 240 | expect(helper.scope.slider.min).to.equal(0) 241 | }) 242 | 243 | it('should set minH value to previous min and switch min/max when HOME is pressed on maxH', function() { 244 | helper.slider.maxH.triggerHandler('focus') 245 | helper.pressKeydown(helper.slider.maxH, 'HOME') 246 | expect(helper.scope.slider.min).to.equal(0) 247 | expect(helper.scope.slider.max).to.equal(50) 248 | }) 249 | 250 | it('should set minH value to previous max and switch min/max when END is pressed on minH', function() { 251 | helper.slider.minH.triggerHandler('focus') 252 | helper.pressKeydown(helper.slider.minH, 'END') 253 | expect(helper.scope.slider.min).to.equal(100) 254 | expect(helper.scope.slider.max).to.equal(200) 255 | }) 256 | 257 | it('should set maxH value to max when END is pressed on maxH', function() { 258 | helper.slider.maxH.triggerHandler('focus') 259 | helper.pressKeydown(helper.slider.maxH, 'END') 260 | expect(helper.scope.slider.max).to.equal(200) 261 | }) 262 | 263 | it('should do nothing when SPACE is pressed on minH', function() { 264 | helper.slider.minH.triggerHandler('focus') 265 | helper.pressKeydown(helper.slider.minH, 'SPACE') 266 | expect(helper.scope.slider.min).to.equal(50) 267 | }) 268 | 269 | it('should do nothing when SPACE is pressed on maxH', function() { 270 | helper.slider.maxH.triggerHandler('focus') 271 | helper.pressKeydown(helper.slider.maxH, 'SPACE') 272 | expect(helper.scope.slider.max).to.equal(100) 273 | }) 274 | 275 | it('should not modify minH when keypress but not focused', function() { 276 | helper.slider.minH.triggerHandler('focus') 277 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 278 | expect(helper.scope.slider.min).to.equal(49) 279 | helper.slider.minH.triggerHandler('blur') 280 | helper.pressKeydown(helper.slider.minH, 'RIGHT', { timeout: false }) 281 | expect(helper.scope.slider.min).to.equal(49) 282 | }) 283 | 284 | it('should not modify maxH when keypress but not focused', function() { 285 | helper.slider.maxH.triggerHandler('focus') 286 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 287 | expect(helper.scope.slider.max).to.equal(99) 288 | helper.slider.maxH.triggerHandler('blur') 289 | helper.pressKeydown(helper.slider.maxH, 'RIGHT', { timeout: false }) 290 | expect(helper.scope.slider.max).to.equal(99) 291 | }) 292 | }) 293 | })() 294 | -------------------------------------------------------------------------------- /tests/specs/keyboard-controls/specific-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Keyboard controls - specific tests', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | it('should not go below floor', function() { 26 | var sliderConf = { 27 | value: 10, 28 | options: { 29 | floor: 0, 30 | ceil: 1000, 31 | step: 10, 32 | }, 33 | } 34 | helper.createSlider(sliderConf) 35 | helper.slider.minH.triggerHandler('focus') 36 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 37 | expect(helper.scope.slider.value).to.equal(0) 38 | }) 39 | 40 | it('should not go above ceil', function() { 41 | var sliderConf = { 42 | value: 990, 43 | options: { 44 | floor: 0, 45 | ceil: 1000, 46 | step: 10, 47 | }, 48 | } 49 | helper.createSlider(sliderConf) 50 | helper.slider.minH.triggerHandler('focus') 51 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 52 | expect(helper.scope.slider.value).to.equal(1000) 53 | }) 54 | 55 | it('should not be modified by keyboard if disabled=true', function() { 56 | var sliderConf = { 57 | value: 10, 58 | options: { 59 | floor: 0, 60 | ceil: 100, 61 | disabled: true, 62 | }, 63 | } 64 | helper.createSlider(sliderConf) 65 | helper.slider.minH.triggerHandler('focus') 66 | helper.pressKeydown(helper.slider.minH, 'LEFT') 67 | expect(helper.scope.slider.value).to.equal(10) 68 | }) 69 | 70 | it('should not be modified by keyboard if readOnly=true', function() { 71 | var sliderConf = { 72 | value: 10, 73 | options: { 74 | floor: 0, 75 | ceil: 100, 76 | readOnly: true, 77 | }, 78 | } 79 | helper.createSlider(sliderConf) 80 | helper.slider.minH.triggerHandler('focus') 81 | helper.pressKeydown(helper.slider.minH, 'LEFT') 82 | expect(helper.scope.slider.value).to.equal(10) 83 | }) 84 | 85 | it('should not be modified by keyboard if new range is below minRange', function() { 86 | var sliderConf = { 87 | min: 45, 88 | max: 55, 89 | options: { 90 | floor: 0, 91 | ceil: 100, 92 | step: 1, 93 | minRange: 10, 94 | }, 95 | } 96 | helper.createRangeSlider(sliderConf) 97 | //try to move minH right 98 | helper.slider.minH.triggerHandler('focus') 99 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 100 | expect(helper.scope.slider.min).to.equal(45) 101 | 102 | //try to move maxH left 103 | helper.slider.maxH.triggerHandler('focus') 104 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 105 | expect(helper.scope.slider.max).to.equal(55) 106 | }) 107 | 108 | it('should be modified by keyboard if new range is above minRange', function() { 109 | var sliderConf = { 110 | min: 45, 111 | max: 55, 112 | options: { 113 | floor: 0, 114 | ceil: 100, 115 | step: 1, 116 | minRange: 10, 117 | }, 118 | } 119 | helper.createRangeSlider(sliderConf) 120 | 121 | //try to move minH left 122 | helper.slider.minH.triggerHandler('focus') 123 | helper.pressKeydown(helper.slider.minH, 'LEFT') 124 | expect(helper.scope.slider.min).to.equal(44) 125 | 126 | //try to move maxH right 127 | helper.slider.maxH.triggerHandler('focus') 128 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 129 | expect(helper.scope.slider.max).to.equal(56) 130 | }) 131 | 132 | it('should not be modified by keyboard if new range is above maxRange', function() { 133 | var sliderConf = { 134 | min: 45, 135 | max: 55, 136 | options: { 137 | floor: 0, 138 | ceil: 100, 139 | step: 1, 140 | maxRange: 10, 141 | }, 142 | } 143 | helper.createRangeSlider(sliderConf) 144 | //try to move minH left 145 | helper.slider.minH.triggerHandler('focus') 146 | helper.pressKeydown(helper.slider.minH, 'LEFT') 147 | expect(helper.scope.slider.min).to.equal(45) 148 | 149 | //try to move maxH right 150 | helper.slider.maxH.triggerHandler('focus') 151 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 152 | expect(helper.scope.slider.max).to.equal(55) 153 | }) 154 | 155 | it('should be modified by keyboard if new range is below maxRange', function() { 156 | var sliderConf = { 157 | min: 45, 158 | max: 55, 159 | options: { 160 | floor: 0, 161 | ceil: 100, 162 | step: 1, 163 | maxRange: 10, 164 | }, 165 | } 166 | helper.createRangeSlider(sliderConf) 167 | 168 | //try to move minH right 169 | helper.slider.minH.triggerHandler('focus') 170 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 171 | expect(helper.scope.slider.min).to.equal(46) 172 | 173 | //try to move maxH left 174 | helper.slider.maxH.triggerHandler('focus') 175 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 176 | expect(helper.scope.slider.max).to.equal(54) 177 | }) 178 | 179 | it('should be modified by keyboard if new value is above minLimit', function() { 180 | var sliderConf = { 181 | value: 10, 182 | options: { 183 | floor: 0, 184 | ceil: 100, 185 | step: 1, 186 | minLimit: 10, 187 | }, 188 | } 189 | helper.createSlider(sliderConf) 190 | //try to move minH right 191 | helper.slider.minH.triggerHandler('focus') 192 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 193 | expect(helper.scope.slider.value).to.equal(11) 194 | }) 195 | 196 | it('should not be modified by keyboard if new value is below minLimit', function() { 197 | var sliderConf = { 198 | value: 10, 199 | options: { 200 | floor: 0, 201 | ceil: 100, 202 | step: 1, 203 | minLimit: 10, 204 | }, 205 | } 206 | helper.createSlider(sliderConf) 207 | //try to move minH left 208 | helper.slider.minH.triggerHandler('focus') 209 | helper.pressKeydown(helper.slider.minH, 'LEFT') 210 | expect(helper.scope.slider.value).to.equal(10) 211 | }) 212 | 213 | it('should be modified by keyboard if new value is below maxLimit', function() { 214 | var sliderConf = { 215 | value: 90, 216 | options: { 217 | floor: 0, 218 | ceil: 100, 219 | step: 1, 220 | maxLimit: 90, 221 | }, 222 | } 223 | helper.createSlider(sliderConf) 224 | //try to move minH left 225 | helper.slider.minH.triggerHandler('focus') 226 | helper.pressKeydown(helper.slider.minH, 'LEFT') 227 | expect(helper.scope.slider.value).to.equal(89) 228 | }) 229 | 230 | it('should not be modified by keyboard if new value is above maxLimit', function() { 231 | var sliderConf = { 232 | value: 90, 233 | options: { 234 | floor: 0, 235 | ceil: 100, 236 | step: 1, 237 | maxLimit: 90, 238 | }, 239 | } 240 | helper.createSlider(sliderConf) 241 | //try to move minH right 242 | helper.slider.minH.triggerHandler('focus') 243 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 244 | expect(helper.scope.slider.value).to.equal(90) 245 | }) 246 | 247 | it('should refocus the slider after a reset if needed and still handle keyboard', function() { 248 | var sliderConf = { 249 | value: 90, 250 | options: { 251 | floor: 0, 252 | ceil: 100, 253 | step: 1, 254 | }, 255 | } 256 | helper.createSlider(sliderConf) 257 | //try to move minH right 258 | helper.slider.minH.triggerHandler('focus') 259 | 260 | helper.slider.resetSlider() 261 | 262 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 263 | expect(document.activeElement).to.equal(helper.slider.minH[0]) 264 | expect(helper.scope.slider.value).to.equal(91) 265 | }) 266 | }) 267 | 268 | describe('Right to left Keyboard controls - specific tests', function() { 269 | var helper, RzSliderOptions, $rootScope, $timeout 270 | 271 | beforeEach(module('test-helper')) 272 | 273 | beforeEach(inject(function( 274 | TestHelper, 275 | _RzSliderOptions_, 276 | _$rootScope_, 277 | _$timeout_ 278 | ) { 279 | helper = TestHelper 280 | RzSliderOptions = _RzSliderOptions_ 281 | $rootScope = _$rootScope_ 282 | $timeout = _$timeout_ 283 | })) 284 | 285 | afterEach(function() { 286 | helper.clean() 287 | }) 288 | 289 | it('should not go below floor', function() { 290 | var sliderConf = { 291 | value: 10, 292 | options: { 293 | floor: 0, 294 | ceil: 1000, 295 | step: 10, 296 | rightToLeft: true, 297 | }, 298 | } 299 | helper.createSlider(sliderConf) 300 | helper.slider.minH.triggerHandler('focus') 301 | helper.pressKeydown(helper.slider.minH, 'PAGEDOWN') 302 | expect(helper.scope.slider.value).to.equal(0) 303 | }) 304 | 305 | it('should not go above ceil', function() { 306 | var sliderConf = { 307 | value: 990, 308 | options: { 309 | floor: 0, 310 | ceil: 1000, 311 | step: 10, 312 | rightToLeft: true, 313 | }, 314 | } 315 | helper.createSlider(sliderConf) 316 | helper.slider.minH.triggerHandler('focus') 317 | helper.pressKeydown(helper.slider.minH, 'PAGEUP') 318 | expect(helper.scope.slider.value).to.equal(1000) 319 | }) 320 | 321 | it('should not be modified by keyboard if disabled=true', function() { 322 | var sliderConf = { 323 | value: 10, 324 | options: { 325 | floor: 0, 326 | ceil: 100, 327 | disabled: true, 328 | rightToLeft: true, 329 | }, 330 | } 331 | helper.createSlider(sliderConf) 332 | helper.slider.minH.triggerHandler('focus') 333 | helper.pressKeydown(helper.slider.minH, 'LEFT') 334 | expect(helper.scope.slider.value).to.equal(10) 335 | }) 336 | 337 | it('should not be modified by keyboard if readOnly=true', function() { 338 | var sliderConf = { 339 | value: 10, 340 | options: { 341 | floor: 0, 342 | ceil: 100, 343 | readOnly: true, 344 | rightToLeft: true, 345 | }, 346 | } 347 | helper.createSlider(sliderConf) 348 | helper.slider.minH.triggerHandler('focus') 349 | helper.pressKeydown(helper.slider.minH, 'LEFT') 350 | expect(helper.scope.slider.value).to.equal(10) 351 | }) 352 | 353 | it('should not be modified by keyboard if new range is below minRange', function() { 354 | var sliderConf = { 355 | min: 45, 356 | max: 55, 357 | options: { 358 | floor: 0, 359 | ceil: 100, 360 | step: 1, 361 | minRange: 10, 362 | rightToLeft: true, 363 | }, 364 | } 365 | helper.createRangeSlider(sliderConf) 366 | //try to move minH left ( increase in rtl ) 367 | helper.slider.minH.triggerHandler('focus') 368 | helper.pressKeydown(helper.slider.minH, 'LEFT') 369 | expect(helper.scope.slider.min).to.equal(45) 370 | 371 | //try to move maxH right (decrease in rtl ) 372 | helper.slider.maxH.triggerHandler('focus') 373 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 374 | expect(helper.scope.slider.max).to.equal(55) 375 | }) 376 | 377 | it('should be modified by keyboard if new range is above minRange', function() { 378 | var sliderConf = { 379 | min: 45, 380 | max: 55, 381 | options: { 382 | floor: 0, 383 | ceil: 100, 384 | step: 1, 385 | minRange: 10, 386 | rightToLeft: true, 387 | }, 388 | } 389 | helper.createRangeSlider(sliderConf) 390 | 391 | //try to move minH RIGHT 392 | helper.slider.minH.triggerHandler('focus') 393 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 394 | expect(helper.scope.slider.min).to.equal(44) 395 | 396 | //try to move maxH LEFT 397 | helper.slider.maxH.triggerHandler('focus') 398 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 399 | expect(helper.scope.slider.max).to.equal(56) 400 | }) 401 | 402 | it('should not be modified by keyboard if new range is above maxRange', function() { 403 | var sliderConf = { 404 | min: 45, 405 | max: 55, 406 | options: { 407 | floor: 0, 408 | ceil: 100, 409 | step: 1, 410 | maxRange: 10, 411 | rightToLeft: true, 412 | }, 413 | } 414 | helper.createRangeSlider(sliderConf) 415 | //try to move minH right ( increase in rtl ) 416 | helper.slider.minH.triggerHandler('focus') 417 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 418 | expect(helper.scope.slider.min).to.equal(45) 419 | 420 | //try to move maxH left (decrease in rtl ) 421 | helper.slider.maxH.triggerHandler('focus') 422 | helper.pressKeydown(helper.slider.maxH, 'LEFT') 423 | expect(helper.scope.slider.max).to.equal(55) 424 | }) 425 | 426 | it('should be modified by keyboard if new range is below maxRange', function() { 427 | var sliderConf = { 428 | min: 45, 429 | max: 55, 430 | options: { 431 | floor: 0, 432 | ceil: 100, 433 | step: 1, 434 | maxRange: 10, 435 | rightToLeft: true, 436 | }, 437 | } 438 | helper.createRangeSlider(sliderConf) 439 | 440 | //try to move minH LEFT 441 | helper.slider.minH.triggerHandler('focus') 442 | helper.pressKeydown(helper.slider.minH, 'LEFT') 443 | expect(helper.scope.slider.min).to.equal(46) 444 | 445 | //try to move maxH RIGHT 446 | helper.slider.maxH.triggerHandler('focus') 447 | helper.pressKeydown(helper.slider.maxH, 'RIGHT') 448 | expect(helper.scope.slider.max).to.equal(54) 449 | }) 450 | }) 451 | })() 452 | -------------------------------------------------------------------------------- /tests/specs/keyboard-controls/vertical-slider-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Keyboard controls - vertical slider', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | value: 100, 28 | options: { 29 | floor: 0, 30 | ceil: 200, 31 | vertical: true, 32 | }, 33 | } 34 | helper.createSlider(sliderConf) 35 | }) 36 | 37 | it('should increment by 1 when RIGHT is pressed', function() { 38 | helper.slider.minH.triggerHandler('focus') 39 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 40 | expect(helper.scope.slider.value).to.equal(101) 41 | }) 42 | 43 | it('should increment by 1 when UP is pressed', function() { 44 | helper.slider.minH.triggerHandler('focus') 45 | helper.pressKeydown(helper.slider.minH, 'UP') 46 | expect(helper.scope.slider.value).to.equal(101) 47 | }) 48 | 49 | it('should decrement by 1 when DOWN is pressed', function() { 50 | helper.slider.minH.triggerHandler('focus') 51 | helper.pressKeydown(helper.slider.minH, 'DOWN') 52 | expect(helper.scope.slider.value).to.equal(99) 53 | }) 54 | 55 | it('should decrement by 1 when LEFT is pressed', function() { 56 | helper.slider.minH.triggerHandler('focus') 57 | helper.pressKeydown(helper.slider.minH, 'LEFT') 58 | expect(helper.scope.slider.value).to.equal(99) 59 | }) 60 | }) 61 | 62 | describe('Keyboard controls - vertical slider with reverserControls', function() { 63 | var helper, RzSliderOptions, $rootScope, $timeout 64 | 65 | beforeEach(module('test-helper')) 66 | 67 | beforeEach(inject(function( 68 | TestHelper, 69 | _RzSliderOptions_, 70 | _$rootScope_, 71 | _$timeout_ 72 | ) { 73 | helper = TestHelper 74 | RzSliderOptions = _RzSliderOptions_ 75 | $rootScope = _$rootScope_ 76 | $timeout = _$timeout_ 77 | })) 78 | 79 | afterEach(function() { 80 | helper.clean() 81 | }) 82 | 83 | beforeEach(function() { 84 | var sliderConf = { 85 | value: 100, 86 | options: { 87 | floor: 0, 88 | ceil: 200, 89 | vertical: true, 90 | reversedControls: true, 91 | }, 92 | } 93 | helper.createSlider(sliderConf) 94 | }) 95 | 96 | it('should increment by 1 when LEFT is pressed', function() { 97 | helper.slider.minH.triggerHandler('focus') 98 | helper.pressKeydown(helper.slider.minH, 'LEFT') 99 | expect(helper.scope.slider.value).to.equal(101) 100 | }) 101 | 102 | it('should increment by 1 when DOWN is pressed', function() { 103 | helper.slider.minH.triggerHandler('focus') 104 | helper.pressKeydown(helper.slider.minH, 'DOWN') 105 | expect(helper.scope.slider.value).to.equal(101) 106 | }) 107 | 108 | it('should decrement by 1 when UP is pressed', function() { 109 | helper.slider.minH.triggerHandler('focus') 110 | helper.pressKeydown(helper.slider.minH, 'UP') 111 | expect(helper.scope.slider.value).to.equal(99) 112 | }) 113 | 114 | it('should decrement by 1 when RIGHT is pressed', function() { 115 | helper.slider.minH.triggerHandler('focus') 116 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 117 | expect(helper.scope.slider.value).to.equal(99) 118 | }) 119 | }) 120 | 121 | describe('Right to left Keyboard controls - vertical slider', function() { 122 | var helper, RzSliderOptions, $rootScope, $timeout 123 | 124 | beforeEach(module('test-helper')) 125 | 126 | beforeEach(inject(function( 127 | TestHelper, 128 | _RzSliderOptions_, 129 | _$rootScope_, 130 | _$timeout_ 131 | ) { 132 | helper = TestHelper 133 | RzSliderOptions = _RzSliderOptions_ 134 | $rootScope = _$rootScope_ 135 | $timeout = _$timeout_ 136 | })) 137 | 138 | afterEach(function() { 139 | helper.clean() 140 | }) 141 | 142 | beforeEach(function() { 143 | var sliderConf = { 144 | value: 100, 145 | options: { 146 | floor: 0, 147 | ceil: 200, 148 | vertical: true, 149 | rightToLeft: true, 150 | }, 151 | } 152 | helper.createSlider(sliderConf) 153 | }) 154 | 155 | it('should decrement by 1 when RIGHT is pressed', function() { 156 | helper.slider.minH.triggerHandler('focus') 157 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 158 | expect(helper.scope.slider.value).to.equal(99) 159 | }) 160 | 161 | it('should decrement by 1 when UP is pressed', function() { 162 | //while not strictly left to right this does allow also reversing vertical bars 163 | helper.slider.minH.triggerHandler('focus') 164 | helper.pressKeydown(helper.slider.minH, 'UP') 165 | expect(helper.scope.slider.value).to.equal(99) 166 | }) 167 | 168 | it('should increment by 1 when DOWN is pressed', function() { 169 | //while not strictly left to right this does allow also reversing vertical bars 170 | helper.slider.minH.triggerHandler('focus') 171 | helper.pressKeydown(helper.slider.minH, 'DOWN') 172 | expect(helper.scope.slider.value).to.equal(101) 173 | }) 174 | 175 | it('should increment by 1 when LEFT is pressed', function() { 176 | helper.slider.minH.triggerHandler('focus') 177 | helper.pressKeydown(helper.slider.minH, 'LEFT') 178 | expect(helper.scope.slider.value).to.equal(101) 179 | }) 180 | }) 181 | 182 | describe('Right to left Keyboard controls - vertical slider', function() { 183 | var helper, RzSliderOptions, $rootScope, $timeout 184 | 185 | beforeEach(module('test-helper')) 186 | 187 | beforeEach(inject(function( 188 | TestHelper, 189 | _RzSliderOptions_, 190 | _$rootScope_, 191 | _$timeout_ 192 | ) { 193 | helper = TestHelper 194 | RzSliderOptions = _RzSliderOptions_ 195 | $rootScope = _$rootScope_ 196 | $timeout = _$timeout_ 197 | })) 198 | 199 | afterEach(function() { 200 | helper.clean() 201 | }) 202 | 203 | beforeEach(function() { 204 | var sliderConf = { 205 | value: 100, 206 | options: { 207 | floor: 0, 208 | ceil: 200, 209 | vertical: true, 210 | rightToLeft: true, 211 | reversedControls: true, 212 | }, 213 | } 214 | helper.createSlider(sliderConf) 215 | }) 216 | 217 | it('should decrement by 1 when LEFT is pressed', function() { 218 | helper.slider.minH.triggerHandler('focus') 219 | helper.pressKeydown(helper.slider.minH, 'LEFT') 220 | expect(helper.scope.slider.value).to.equal(99) 221 | }) 222 | 223 | it('should decrement by 1 when DOWN is pressed', function() { 224 | helper.slider.minH.triggerHandler('focus') 225 | helper.pressKeydown(helper.slider.minH, 'DOWN') 226 | expect(helper.scope.slider.value).to.equal(99) 227 | }) 228 | 229 | it('should increment by 1 when UP is pressed', function() { 230 | helper.slider.minH.triggerHandler('focus') 231 | helper.pressKeydown(helper.slider.minH, 'UP') 232 | expect(helper.scope.slider.value).to.equal(101) 233 | }) 234 | 235 | it('should increment by 1 when RIGHT is pressed', function() { 236 | helper.slider.minH.triggerHandler('focus') 237 | helper.pressKeydown(helper.slider.minH, 'RIGHT') 238 | expect(helper.scope.slider.value).to.equal(101) 239 | }) 240 | }) 241 | })() 242 | -------------------------------------------------------------------------------- /tests/specs/labels-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Single slider initialisation - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | it('should display floor and ceil labels when handle is at the middle', function() { 26 | var sliderConf = { 27 | value: 50, 28 | options: { 29 | floor: 0, 30 | ceil: 100, 31 | }, 32 | } 33 | helper.createSlider(sliderConf) 34 | expect(helper.slider.flrLab.css('visibility')).to.equal('visible') 35 | expect(helper.slider.ceilLab.css('visibility')).to.equal('visible') 36 | }) 37 | 38 | it('should hide floor and display ceil labels when handle is at min', function() { 39 | var sliderConf = { 40 | value: 0, 41 | options: { 42 | floor: 0, 43 | ceil: 100, 44 | }, 45 | } 46 | helper.createSlider(sliderConf) 47 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 48 | expect(helper.slider.ceilLab.css('visibility')).to.equal('visible') 49 | }) 50 | 51 | it('should show floor and hide ceil labels when handle is at max', function() { 52 | var sliderConf = { 53 | value: 100, 54 | options: { 55 | floor: 0, 56 | ceil: 100, 57 | }, 58 | } 59 | helper.createSlider(sliderConf) 60 | expect(helper.slider.flrLab.css('visibility')).to.equal('visible') 61 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 62 | }) 63 | 64 | it('should display floor and ceil labels when handle is at the middle for RTL slider', function() { 65 | var sliderConf = { 66 | value: 50, 67 | options: { 68 | floor: 0, 69 | ceil: 100, 70 | rightToLeft: true, 71 | }, 72 | } 73 | helper.createSlider(sliderConf) 74 | expect(helper.slider.flrLab.css('visibility')).to.equal('visible') 75 | expect(helper.slider.ceilLab.css('visibility')).to.equal('visible') 76 | }) 77 | 78 | it('should hide floor and display ceil labels when handle is at min for RTL slider', function() { 79 | var sliderConf = { 80 | value: 0, 81 | options: { 82 | floor: 0, 83 | ceil: 100, 84 | rightToLeft: true, 85 | }, 86 | } 87 | helper.createSlider(sliderConf) 88 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 89 | expect(helper.slider.ceilLab.css('visibility')).to.equal('visible') 90 | }) 91 | 92 | it('should show floor and hide ceil labels when handle is at max for RTL slider', function() { 93 | var sliderConf = { 94 | value: 100, 95 | options: { 96 | floor: 0, 97 | ceil: 100, 98 | rightToLeft: true, 99 | }, 100 | } 101 | helper.createSlider(sliderConf) 102 | expect(helper.slider.flrLab.css('visibility')).to.equal('visible') 103 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 104 | }) 105 | 106 | it('should hide floor and ceil labels when minHandle is at min and maxHandle at max for range slider', function() { 107 | var sliderConf = { 108 | min: 0, 109 | max: 100, 110 | options: { 111 | floor: 0, 112 | ceil: 100, 113 | }, 114 | } 115 | helper.createRangeSlider(sliderConf) 116 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 117 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 118 | }) 119 | 120 | it('should hide floor and ceil labels when minHandle is at min and maxHandle at max for range RTL slider', function() { 121 | var sliderConf = { 122 | min: 0, 123 | max: 100, 124 | options: { 125 | floor: 0, 126 | ceil: 100, 127 | rightToLeft: true, 128 | }, 129 | } 130 | helper.createRangeSlider(sliderConf) 131 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 132 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 133 | }) 134 | 135 | it('should hide floor and ceil labels when cmb label is overlapping, for range slider', function() { 136 | var sliderConf = { 137 | minValue: 50, 138 | maxValue: 50, 139 | options: { 140 | floor: 0, 141 | ceil: 100, 142 | translate: function(v, _, which) { 143 | if (which != 'model' && which != 'high') return v 144 | return "I'm whatever long text ===============================================================================================================================================================" 145 | }, 146 | }, 147 | } 148 | 149 | helper.createRangeSlider(sliderConf) 150 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 151 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 152 | }) 153 | 154 | it('should hide floor and ceil labels when cmb label is overlapping, for range RTL slider', function() { 155 | var sliderConf = { 156 | minValue: 50, 157 | maxValue: 50, 158 | options: { 159 | floor: 0, 160 | ceil: 100, 161 | translate: function(v, _, which) { 162 | if (which != 'model' && which != 'high') return v 163 | return "I'm whatever long text ===============================================================================================================================================================" 164 | }, 165 | }, 166 | rightToLeft: true, 167 | } 168 | helper.createRangeSlider(sliderConf) 169 | expect(helper.slider.flrLab.css('visibility')).to.equal('hidden') 170 | expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden') 171 | }) 172 | }) 173 | })() 174 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/draggableOnly-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - draggableRangeOnly Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 40, 28 | max: 60, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | draggableRangeOnly: true, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should handle click and drag on minH correctly', function() { 43 | sinon.spy(helper.slider, 'positionTrackingBar') 44 | sinon.spy(helper.slider, 'callOnChange') 45 | 46 | var event = helper.fireMousedown(helper.slider.minH, 0) 47 | var moveValue = 10, 48 | position = helper.slider.valueToPosition(moveValue) 49 | helper.fireMousemove(position) 50 | 51 | expect(helper.scope.slider.min).to.equal(50) 52 | expect(helper.scope.slider.max).to.equal(70) 53 | expect(helper.slider.positionTrackingBar.callCount).to.equal(1) 54 | expect(helper.slider.callOnChange.callCount).to.equal(1) 55 | }) 56 | 57 | it('should handle click and drag on maxH correctly', function() { 58 | sinon.spy(helper.slider, 'positionTrackingBar') 59 | sinon.spy(helper.slider, 'callOnChange') 60 | var event = helper.fireMousedown(helper.slider.maxH, 0) 61 | var moveValue = 10, 62 | position = helper.slider.valueToPosition(moveValue) 63 | helper.fireMousemove(position) 64 | expect(helper.scope.slider.min).to.equal(50) 65 | expect(helper.scope.slider.max).to.equal(70) 66 | expect(helper.slider.positionTrackingBar.callCount).to.equal(1) 67 | expect(helper.slider.callOnChange.callCount).to.equal(1) 68 | }) 69 | 70 | it('should not handle click on fullbar', function() { 71 | sinon.spy(helper.slider, 'callOnStart') 72 | 73 | var moveValue = 10, 74 | position = helper.slider.valueToPosition(moveValue) 75 | 76 | var event = helper.fireMousedown(helper.slider.fullBar, position) 77 | 78 | expect(helper.scope.slider.min).to.equal(40) 79 | expect(helper.scope.slider.max).to.equal(60) 80 | expect(helper.slider.tracking).to.equal('') 81 | helper.slider.callOnStart.called.should.be.false 82 | }) 83 | 84 | it('should handle click on selbar and move whole range when moved within slider range', function() { 85 | sinon.spy(helper.slider, 'positionTrackingBar') 86 | sinon.spy(helper.slider, 'callOnStart') 87 | sinon.spy(helper.slider, 'callOnChange') 88 | sinon.spy(helper.slider, 'focusElement') 89 | 90 | helper.fireMousedown(helper.slider.selBar, 0) 91 | 92 | var moveValue = 10, 93 | position = helper.slider.valueToPosition(moveValue) 94 | helper.fireMousemove(position) 95 | 96 | expect(helper.scope.slider.min).to.equal(50) 97 | expect(helper.scope.slider.max).to.equal(70) 98 | expect(helper.slider.tracking).to.equal('lowValue') 99 | helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true 100 | expect(helper.slider.positionTrackingBar.callCount).to.equal(2) 101 | expect(helper.slider.callOnStart.callCount).to.equal(1) 102 | expect(helper.slider.callOnChange.callCount).to.equal(2) 103 | }) 104 | 105 | it('should handle click on selbar and move range when near 0 and moved left', function() { 106 | helper.scope.slider.min = 10 107 | helper.scope.$digest() 108 | 109 | helper.fireMousedown(helper.slider.selBar, 0) 110 | helper.fireMousemove(-1000) 111 | 112 | expect(helper.scope.slider.min).to.equal(0) 113 | expect(helper.scope.slider.max).to.equal(50) 114 | expect(helper.slider.tracking).to.equal('lowValue') 115 | }) 116 | 117 | it("should handle click on selbar and don't move range when already at 0 and moved left", function() { 118 | helper.scope.slider.min = 0 119 | helper.scope.$digest() 120 | 121 | helper.fireMousedown(helper.slider.selBar, 0) 122 | helper.fireMousemove(-100) 123 | 124 | expect(helper.scope.slider.min).to.equal(0) 125 | expect(helper.scope.slider.max).to.equal(60) 126 | expect(helper.slider.tracking).to.equal('lowValue') 127 | }) 128 | 129 | it('should handle click on selbar and move range when near max and moved right', function() { 130 | helper.scope.slider.max = 90 131 | helper.scope.$digest() 132 | 133 | helper.fireMousedown(helper.slider.selBar, 0) 134 | helper.fireMousemove(helper.slider.maxPos) 135 | 136 | expect(helper.scope.slider.min).to.equal(50) 137 | expect(helper.scope.slider.max).to.equal(100) 138 | expect(helper.slider.tracking).to.equal('lowValue') 139 | }) 140 | 141 | it("should handle click on selbar and don't move range when already at max and moved right", function() { 142 | helper.scope.slider.max = 100 143 | helper.scope.$digest() 144 | 145 | helper.fireMousedown(helper.slider.selBar, 0) 146 | helper.fireMousemove(helper.slider.maxPos) 147 | 148 | expect(helper.scope.slider.min).to.equal(40) 149 | expect(helper.scope.slider.max).to.equal(100) 150 | expect(helper.slider.tracking).to.equal('lowValue') 151 | }) 152 | 153 | it('should handle click on selbar and move range when floor is not 0 and handle is dragged below limit', function() { 154 | helper.scope.slider.min = 1050 155 | helper.scope.slider.max = 1550 156 | helper.scope.slider.options.floor = 1000 157 | helper.scope.slider.options.ceil = 5000 158 | helper.scope.$digest() 159 | 160 | helper.fireMousedown(helper.slider.selBar, 0) 161 | helper.fireMousemove(-1000) 162 | 163 | expect(helper.scope.slider.min).to.equal(1000) 164 | expect(helper.scope.slider.max).to.equal(1500) 165 | expect(helper.slider.tracking).to.equal('lowValue') 166 | }) 167 | }) 168 | 169 | describe('Right to left Mouse controls - draggableRangeOnly Horizontal', function() { 170 | var helper, RzSliderOptions, $rootScope, $timeout 171 | 172 | beforeEach(module('test-helper')) 173 | 174 | beforeEach(inject(function( 175 | TestHelper, 176 | _RzSliderOptions_, 177 | _$rootScope_, 178 | _$timeout_ 179 | ) { 180 | helper = TestHelper 181 | RzSliderOptions = _RzSliderOptions_ 182 | $rootScope = _$rootScope_ 183 | $timeout = _$timeout_ 184 | })) 185 | 186 | afterEach(function() { 187 | helper.clean() 188 | }) 189 | 190 | beforeEach(function() { 191 | var sliderConf = { 192 | min: 40, 193 | max: 60, 194 | options: { 195 | floor: 0, 196 | ceil: 100, 197 | draggableRangeOnly: true, 198 | leftToRight: true, 199 | }, 200 | } 201 | helper.createRangeSlider(sliderConf) 202 | }) 203 | afterEach(function() { 204 | // to clean document listener 205 | helper.fireMouseup() 206 | }) 207 | 208 | it('should handle click and drag on minH correctly', function() { 209 | sinon.spy(helper.slider, 'positionTrackingBar') 210 | sinon.spy(helper.slider, 'callOnChange') 211 | 212 | var event = helper.fireMousedown(helper.slider.minH, 0) 213 | var moveValue = 10, 214 | position = helper.slider.valueToPosition(moveValue) 215 | helper.fireMousemove(position) 216 | 217 | expect(helper.scope.slider.min).to.equal(50) 218 | expect(helper.scope.slider.max).to.equal(70) 219 | expect(helper.slider.positionTrackingBar.callCount).to.equal(1) 220 | expect(helper.slider.callOnChange.callCount).to.equal(1) 221 | }) 222 | 223 | it('should handle click and drag on maxH correctly', function() { 224 | sinon.spy(helper.slider, 'positionTrackingBar') 225 | sinon.spy(helper.slider, 'callOnChange') 226 | var event = helper.fireMousedown(helper.slider.maxH, 0) 227 | var moveValue = 10, 228 | position = helper.slider.valueToPosition(moveValue) 229 | helper.fireMousemove(position) 230 | expect(helper.scope.slider.min).to.equal(50) 231 | expect(helper.scope.slider.max).to.equal(70) 232 | expect(helper.slider.positionTrackingBar.callCount).to.equal(1) 233 | expect(helper.slider.callOnChange.callCount).to.equal(1) 234 | }) 235 | 236 | it('should not handle click on fullbar', function() { 237 | sinon.spy(helper.slider, 'callOnStart') 238 | 239 | var moveValue = 10, 240 | position = helper.slider.valueToPosition(moveValue) 241 | 242 | var event = helper.fireMousedown(helper.slider.fullBar, position) 243 | 244 | expect(helper.scope.slider.min).to.equal(40) 245 | expect(helper.scope.slider.max).to.equal(60) 246 | expect(helper.slider.tracking).to.equal('') 247 | helper.slider.callOnStart.called.should.be.false 248 | }) 249 | 250 | it('should handle click on selbar and move whole range when moved within slider range', function() { 251 | sinon.spy(helper.slider, 'positionTrackingBar') 252 | sinon.spy(helper.slider, 'callOnStart') 253 | sinon.spy(helper.slider, 'callOnChange') 254 | sinon.spy(helper.slider, 'focusElement') 255 | 256 | helper.fireMousedown(helper.slider.selBar, 0) 257 | 258 | var moveValue = 10, 259 | position = helper.slider.valueToPosition(moveValue) 260 | helper.fireMousemove(position) 261 | 262 | expect(helper.scope.slider.min).to.equal(50) 263 | expect(helper.scope.slider.max).to.equal(70) 264 | expect(helper.slider.tracking).to.equal('lowValue') 265 | helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true 266 | expect(helper.slider.positionTrackingBar.callCount).to.equal(2) 267 | expect(helper.slider.callOnStart.callCount).to.equal(1) 268 | expect(helper.slider.callOnChange.callCount).to.equal(2) 269 | }) 270 | 271 | it('should handle click on selbar and move range when near 0 and moved left', function() { 272 | helper.scope.slider.min = 10 273 | helper.scope.$digest() 274 | 275 | helper.fireMousedown(helper.slider.selBar, 0) 276 | helper.fireMousemove(-1000) 277 | 278 | expect(helper.scope.slider.min).to.equal(0) 279 | expect(helper.scope.slider.max).to.equal(50) 280 | expect(helper.slider.tracking).to.equal('lowValue') 281 | }) 282 | 283 | it("should handle click on selbar and don't move range when already at 0 and moved left", function() { 284 | helper.scope.slider.min = 0 285 | helper.scope.$digest() 286 | 287 | helper.fireMousedown(helper.slider.selBar, 0) 288 | helper.fireMousemove(-100) 289 | 290 | expect(helper.scope.slider.min).to.equal(0) 291 | expect(helper.scope.slider.max).to.equal(60) 292 | expect(helper.slider.tracking).to.equal('lowValue') 293 | }) 294 | 295 | it('should handle click on selbar and move range when near max and moved right', function() { 296 | helper.scope.slider.max = 90 297 | helper.scope.$digest() 298 | 299 | helper.fireMousedown(helper.slider.selBar, 0) 300 | helper.fireMousemove(helper.slider.maxPos) 301 | 302 | expect(helper.scope.slider.min).to.equal(50) 303 | expect(helper.scope.slider.max).to.equal(100) 304 | expect(helper.slider.tracking).to.equal('lowValue') 305 | }) 306 | 307 | it("should handle click on selbar and don't move range when already at max and moved right", function() { 308 | helper.scope.slider.max = 100 309 | helper.scope.$digest() 310 | 311 | helper.fireMousedown(helper.slider.selBar, 0) 312 | helper.fireMousemove(helper.slider.maxPos) 313 | 314 | expect(helper.scope.slider.min).to.equal(40) 315 | expect(helper.scope.slider.max).to.equal(100) 316 | expect(helper.slider.tracking).to.equal('lowValue') 317 | }) 318 | 319 | it('should handle click on selbar and move range when floor is not 0 and handle is dragged below limit', function() { 320 | helper.scope.slider.min = 1050 321 | helper.scope.slider.max = 1550 322 | helper.scope.slider.options.floor = 1000 323 | helper.scope.slider.options.ceil = 5000 324 | helper.scope.$digest() 325 | 326 | helper.fireMousedown(helper.slider.selBar, 0) 327 | helper.fireMousemove(-1000) 328 | 329 | expect(helper.scope.slider.min).to.equal(1000) 330 | expect(helper.scope.slider.max).to.equal(1500) 331 | expect(helper.slider.tracking).to.equal('lowValue') 332 | }) 333 | }) 334 | })() 335 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/minMaxLimit-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - minLimit!=null && maxLimit!=null Range Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 45, 28 | max: 55, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | minLimit: 40, 33 | maxLimit: 60, 34 | }, 35 | } 36 | helper.createRangeSlider(sliderConf) 37 | }) 38 | afterEach(function() { 39 | // to clean document listener 40 | helper.fireMouseup() 41 | }) 42 | 43 | it('should be able to modify minH above minLimit', function() { 44 | helper.fireMousedown(helper.slider.minH, 0) 45 | var expectedValue = 42 46 | helper.moveMouseToValue(expectedValue) 47 | expect(helper.scope.slider.min).to.equal(42) 48 | }) 49 | 50 | it('should not be able to modify minH below minLimit', function() { 51 | helper.fireMousedown(helper.slider.minH, 0) 52 | var expectedValue = 30 53 | helper.moveMouseToValue(expectedValue) 54 | expect(helper.scope.slider.min).to.equal(40) 55 | }) 56 | 57 | it('should be able to modify maxH below maxLimit', function() { 58 | helper.fireMousedown(helper.slider.maxH, 0) 59 | var expectedValue = 58 60 | helper.moveMouseToValue(expectedValue) 61 | expect(helper.scope.slider.max).to.equal(58) 62 | }) 63 | 64 | it('should not be able to modify maxH above maxLimit', function() { 65 | helper.fireMousedown(helper.slider.maxH, 0) 66 | var expectedValue = 70 67 | helper.moveMouseToValue(expectedValue) 68 | expect(helper.scope.slider.max).to.equal(60) 69 | }) 70 | }) 71 | 72 | describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null Range Horizontal', function() { 73 | var helper, RzSliderOptions, $rootScope, $timeout 74 | 75 | beforeEach(module('test-helper')) 76 | 77 | beforeEach(inject(function( 78 | TestHelper, 79 | _RzSliderOptions_, 80 | _$rootScope_, 81 | _$timeout_ 82 | ) { 83 | helper = TestHelper 84 | RzSliderOptions = _RzSliderOptions_ 85 | $rootScope = _$rootScope_ 86 | $timeout = _$timeout_ 87 | })) 88 | 89 | afterEach(function() { 90 | helper.clean() 91 | }) 92 | 93 | beforeEach(function() { 94 | var sliderConf = { 95 | min: 45, 96 | max: 55, 97 | options: { 98 | floor: 0, 99 | ceil: 100, 100 | minLimit: 40, 101 | maxLimit: 60, 102 | rightToLeft: true, 103 | }, 104 | } 105 | helper.createRangeSlider(sliderConf) 106 | }) 107 | afterEach(function() { 108 | // to clean document listener 109 | helper.fireMouseup() 110 | }) 111 | 112 | it('should be able to modify minH above minLimit', function() { 113 | helper.fireMousedown(helper.slider.minH, 0) 114 | var expectedValue = 42 115 | helper.moveMouseToValue(expectedValue) 116 | expect(helper.scope.slider.min).to.equal(42) 117 | }) 118 | 119 | it('should not be able to modify minH below minLimit', function() { 120 | helper.fireMousedown(helper.slider.minH, 0) 121 | var expectedValue = 30 122 | helper.moveMouseToValue(expectedValue) 123 | expect(helper.scope.slider.min).to.equal(40) 124 | }) 125 | 126 | it('should be able to modify maxH below maxLimit', function() { 127 | helper.fireMousedown(helper.slider.maxH, 0) 128 | var expectedValue = 58 129 | helper.moveMouseToValue(expectedValue) 130 | expect(helper.scope.slider.max).to.equal(58) 131 | }) 132 | 133 | it('should not be able to modify maxH above maxLimit', function() { 134 | helper.fireMousedown(helper.slider.maxH, 0) 135 | var expectedValue = 70 136 | helper.moveMouseToValue(expectedValue) 137 | expect(helper.scope.slider.max).to.equal(60) 138 | }) 139 | }) 140 | })() 141 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/minMaxLimit-single-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - minLimit!=null && maxLimit!=null Single Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | value: 50, 28 | options: { 29 | floor: 0, 30 | ceil: 100, 31 | minLimit: 40, 32 | maxLimit: 60, 33 | }, 34 | } 35 | helper.createSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should be able to modify minH above minLimit', function() { 43 | helper.fireMousedown(helper.slider.minH, 0) 44 | var expectedValue = 42 45 | helper.moveMouseToValue(expectedValue) 46 | expect(helper.scope.slider.value).to.equal(42) 47 | }) 48 | 49 | it('should not be able to modify minH below minLimit', function() { 50 | helper.fireMousedown(helper.slider.minH, 0) 51 | var expectedValue = 30 52 | helper.moveMouseToValue(expectedValue) 53 | expect(helper.scope.slider.value).to.equal(40) 54 | }) 55 | 56 | it('should be able to modify minH below maxLimit', function() { 57 | helper.fireMousedown(helper.slider.minH, 0) 58 | var expectedValue = 58 59 | helper.moveMouseToValue(expectedValue) 60 | expect(helper.scope.slider.value).to.equal(58) 61 | }) 62 | 63 | it('should not be able to modify minH above maxLimit', function() { 64 | helper.fireMousedown(helper.slider.minH, 0) 65 | var expectedValue = 70 66 | helper.moveMouseToValue(expectedValue) 67 | expect(helper.scope.slider.value).to.equal(60) 68 | }) 69 | }) 70 | 71 | describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null Single Horizontal', function() { 72 | var helper, RzSliderOptions, $rootScope, $timeout 73 | 74 | beforeEach(module('test-helper')) 75 | 76 | beforeEach(inject(function( 77 | TestHelper, 78 | _RzSliderOptions_, 79 | _$rootScope_, 80 | _$timeout_ 81 | ) { 82 | helper = TestHelper 83 | RzSliderOptions = _RzSliderOptions_ 84 | $rootScope = _$rootScope_ 85 | $timeout = _$timeout_ 86 | })) 87 | 88 | afterEach(function() { 89 | helper.clean() 90 | }) 91 | 92 | beforeEach(function() { 93 | var sliderConf = { 94 | value: 50, 95 | options: { 96 | floor: 0, 97 | ceil: 100, 98 | minLimit: 40, 99 | maxLimit: 60, 100 | rightToLeft: true, 101 | }, 102 | } 103 | helper.createSlider(sliderConf) 104 | }) 105 | afterEach(function() { 106 | // to clean document listener 107 | helper.fireMouseup() 108 | }) 109 | 110 | it('should be able to modify minH above minLimit', function() { 111 | helper.fireMousedown(helper.slider.minH, 0) 112 | var expectedValue = 42 113 | helper.moveMouseToValue(expectedValue) 114 | expect(helper.scope.slider.value).to.equal(42) 115 | }) 116 | 117 | it('should not be able to modify minH below minLimit', function() { 118 | helper.fireMousedown(helper.slider.minH, 0) 119 | var expectedValue = 30 120 | helper.moveMouseToValue(expectedValue) 121 | expect(helper.scope.slider.value).to.equal(40) 122 | }) 123 | 124 | it('should be able to modify minH below maxLimit', function() { 125 | helper.fireMousedown(helper.slider.minH, 0) 126 | var expectedValue = 58 127 | helper.moveMouseToValue(expectedValue) 128 | expect(helper.scope.slider.value).to.equal(58) 129 | }) 130 | 131 | it('should not be able to modify minH above maxLimit', function() { 132 | helper.fireMousedown(helper.slider.minH, 0) 133 | var expectedValue = 70 134 | helper.moveMouseToValue(expectedValue) 135 | expect(helper.scope.slider.value).to.equal(60) 136 | }) 137 | }) 138 | })() 139 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/minMaxRange-noSwitching-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - minRange and noSwitching Range Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 45, 28 | max: 55, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | minRange: 10, 33 | maxRange: 50, 34 | noSwitching: true, 35 | }, 36 | } 37 | helper.createRangeSlider(sliderConf) 38 | }) 39 | afterEach(function() { 40 | // to clean document listener 41 | helper.fireMouseup() 42 | }) 43 | 44 | it('should not modify any value if new range would be smaller than minRange when moving minH', function() { 45 | helper.fireMousedown(helper.slider.minH, 0) 46 | var expectedValue = 50 47 | helper.moveMouseToValue(expectedValue) 48 | expect(helper.scope.slider.min).to.equal(45) 49 | }) 50 | 51 | it('should not modify any value if new range would be smaller than minRange when moving maxH', function() { 52 | helper.fireMousedown(helper.slider.maxH, 0) 53 | var expectedValue = 50 54 | helper.moveMouseToValue(expectedValue) 55 | expect(helper.scope.slider.max).to.equal(55) 56 | }) 57 | 58 | it('should modify the min value if new range is larger than minRange when moving minH', function() { 59 | helper.fireMousedown(helper.slider.minH, 0) 60 | var expectedValue = 30 61 | helper.moveMouseToValue(expectedValue) 62 | expect(helper.scope.slider.min).to.equal(expectedValue) 63 | }) 64 | 65 | it('should modify the max value if new range is larger than than minRange when moving maxH', function() { 66 | helper.fireMousedown(helper.slider.maxH, 0) 67 | var expectedValue = 70 68 | helper.moveMouseToValue(expectedValue) 69 | expect(helper.scope.slider.max).to.equal(expectedValue) 70 | }) 71 | 72 | it('should not switch min/max when moving minH even if the range is large enough', function() { 73 | helper.fireMousedown(helper.slider.minH, 0) 74 | var expectedValue = 80 75 | helper.moveMouseToValue(expectedValue) 76 | expect(helper.scope.slider.min).to.equal(45) 77 | expect(helper.scope.slider.max).to.equal(55) 78 | }) 79 | 80 | it('should not switch min/max when moving maxH even if the range is large enough', function() { 81 | helper.fireMousedown(helper.slider.maxH, 0) 82 | var expectedValue = 20 83 | helper.moveMouseToValue(expectedValue) 84 | expect(helper.scope.slider.min).to.equal(45) 85 | expect(helper.scope.slider.max).to.equal(55) 86 | }) 87 | 88 | it('should not modify any value if new range would be larger than maxRange when moving minH', function() { 89 | helper.fireMousedown(helper.slider.minH, 0) 90 | var expectedValue = 0 91 | helper.moveMouseToValue(expectedValue) 92 | expect(helper.scope.slider.min).to.equal(5) 93 | }) 94 | 95 | it('should not modify any value if new range would be larger than maxRange when moving maxH', function() { 96 | helper.fireMousedown(helper.slider.maxH, 0) 97 | var expectedValue = 100 98 | helper.moveMouseToValue(expectedValue) 99 | expect(helper.scope.slider.max).to.equal(95) 100 | }) 101 | 102 | it('should not switch min/max when moving minH far higher than maxH (issue #377)', function() { 103 | helper.scope.slider.min = 0 104 | helper.scope.slider.max = 10 105 | helper.scope.$digest() 106 | 107 | helper.fireMousedown(helper.slider.minH, 0) 108 | var expectedValue = 100 109 | helper.moveMouseToValue(expectedValue) 110 | expect(helper.scope.slider.min).to.equal(0) 111 | expect(helper.scope.slider.max).to.equal(10) 112 | }) 113 | 114 | it('should not switch min/max when moving maxH far lower than minH (issue #377)', function() { 115 | helper.scope.slider.min = 90 116 | helper.scope.slider.max = 100 117 | helper.scope.$digest() 118 | 119 | helper.fireMousedown(helper.slider.maxH, 0) 120 | var expectedValue = 0 121 | helper.moveMouseToValue(expectedValue) 122 | expect(helper.scope.slider.min).to.equal(90) 123 | expect(helper.scope.slider.max).to.equal(100) 124 | }) 125 | }) 126 | 127 | describe('Right to left Mouse controls - minRange and noSwitching Range Horizontal', function() { 128 | var helper, RzSliderOptions, $rootScope, $timeout 129 | 130 | beforeEach(module('test-helper')) 131 | 132 | beforeEach(inject(function( 133 | TestHelper, 134 | _RzSliderOptions_, 135 | _$rootScope_, 136 | _$timeout_ 137 | ) { 138 | helper = TestHelper 139 | RzSliderOptions = _RzSliderOptions_ 140 | $rootScope = _$rootScope_ 141 | $timeout = _$timeout_ 142 | })) 143 | 144 | afterEach(function() { 145 | helper.clean() 146 | }) 147 | 148 | beforeEach(function() { 149 | var sliderConf = { 150 | min: 45, 151 | max: 55, 152 | options: { 153 | floor: 0, 154 | ceil: 100, 155 | minRange: 10, 156 | noSwitching: true, 157 | rightToLeft: true, 158 | }, 159 | } 160 | helper.createRangeSlider(sliderConf) 161 | }) 162 | afterEach(function() { 163 | // to clean document listener 164 | helper.fireMouseup() 165 | }) 166 | 167 | it('should not modify any value if new range would be smaller than minRange when moving minH', function() { 168 | helper.fireMousedown(helper.slider.minH, 0) 169 | var expectedValue = 50, 170 | position = helper.getMousePosition(expectedValue) 171 | helper.fireMousemove(-position) 172 | expect(helper.scope.slider.min).to.equal(45) 173 | }) 174 | 175 | it('should not modify any value if new range would be smaller than minRange when moving maxH', function() { 176 | helper.fireMousedown(helper.slider.maxH, 0) 177 | var expectedValue = 50, 178 | position = helper.slider.maxPos - helper.getMousePosition(expectedValue) 179 | helper.fireMousemove(position) 180 | expect(helper.scope.slider.max).to.equal(55) 181 | }) 182 | 183 | it('should modify the min value if new range is larger than minRange when moving minH', function() { 184 | helper.fireMousedown(helper.slider.minH, 0) 185 | var expectedValue = 30 186 | helper.moveMouseToValue(expectedValue) 187 | expect(helper.scope.slider.min).to.equal(expectedValue) 188 | }) 189 | 190 | it('should modify the max value if new range is larger than than minRange when moving maxH', function() { 191 | helper.fireMousedown(helper.slider.maxH, 0) 192 | var expectedValue = 70 193 | helper.moveMouseToValue(expectedValue) 194 | expect(helper.scope.slider.max).to.equal(expectedValue) 195 | }) 196 | 197 | it('should not switch min/max when moving minH even if the range is large enough', function() { 198 | helper.fireMousedown(helper.slider.minH, 0) 199 | var expectedValue = 80, 200 | position = helper.getMousePosition(expectedValue) 201 | helper.fireMousemove(-position) 202 | expect(helper.scope.slider.min).to.equal(45) 203 | expect(helper.scope.slider.max).to.equal(55) 204 | }) 205 | 206 | it('should not switch min/max when moving maxH even if the range is large enough', function() { 207 | helper.fireMousedown(helper.slider.maxH, 0) 208 | var expectedValue = 20 209 | helper.moveMouseToValue(expectedValue) 210 | expect(helper.scope.slider.min).to.equal(45) 211 | expect(helper.scope.slider.max).to.equal(55) 212 | }) 213 | }) 214 | })() 215 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/minMaxRange-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - minRange!=0 Range Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 45, 28 | max: 55, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | minRange: 10, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should not modify any value if new range would be smaller than minRange when moving minH', function() { 43 | helper.fireMousedown(helper.slider.minH, 0) 44 | var expectedValue = 50 45 | helper.moveMouseToValue(expectedValue) 46 | expect(helper.scope.slider.min).to.equal(45) 47 | }) 48 | 49 | it('should not modify any value if new range would be smaller than minRange when moving maxH', function() { 50 | helper.fireMousedown(helper.slider.maxH, 0) 51 | var expectedValue = 50 52 | helper.moveMouseToValue(expectedValue) 53 | expect(helper.scope.slider.max).to.equal(55) 54 | }) 55 | 56 | it('should modify the min value if new range is larger than minRange when moving minH', function() { 57 | helper.fireMousedown(helper.slider.minH, 0) 58 | var expectedValue = 30 59 | helper.moveMouseToValue(expectedValue) 60 | expect(helper.scope.slider.min).to.equal(expectedValue) 61 | }) 62 | 63 | it('should modify the max value if new range is larger than than minRange when moving maxH', function() { 64 | helper.fireMousedown(helper.slider.maxH, 0) 65 | var expectedValue = 70 66 | helper.moveMouseToValue(expectedValue) 67 | expect(helper.scope.slider.max).to.equal(expectedValue) 68 | }) 69 | 70 | it('should modify the min value if switch min/max with a value large enough', function() { 71 | helper.fireMousedown(helper.slider.minH, 0) 72 | var expectedValue = 80 73 | helper.moveMouseToValue(expectedValue) 74 | expect(helper.scope.slider.min).to.equal(55) 75 | expect(helper.scope.slider.max).to.equal(expectedValue) 76 | }) 77 | 78 | it('should modify the max value if switch min/max with a value large enough', function() { 79 | helper.fireMousedown(helper.slider.maxH, 0) 80 | var expectedValue = 20 81 | helper.moveMouseToValue(expectedValue) 82 | expect(helper.scope.slider.min).to.equal(expectedValue) 83 | expect(helper.scope.slider.max).to.equal(45) 84 | }) 85 | }) 86 | 87 | describe('Mouse controls - maxRange!=0 Range Horizontal', function() { 88 | var helper, RzSliderOptions, $rootScope, $timeout 89 | 90 | beforeEach(module('test-helper')) 91 | 92 | beforeEach(inject(function( 93 | TestHelper, 94 | _RzSliderOptions_, 95 | _$rootScope_, 96 | _$timeout_ 97 | ) { 98 | helper = TestHelper 99 | RzSliderOptions = _RzSliderOptions_ 100 | $rootScope = _$rootScope_ 101 | $timeout = _$timeout_ 102 | })) 103 | 104 | afterEach(function() { 105 | helper.clean() 106 | }) 107 | 108 | beforeEach(function() { 109 | var sliderConf = { 110 | min: 45, 111 | max: 55, 112 | options: { 113 | floor: 0, 114 | ceil: 100, 115 | maxRange: 10, 116 | }, 117 | } 118 | helper.createRangeSlider(sliderConf) 119 | }) 120 | afterEach(function() { 121 | // to clean document listener 122 | helper.fireMouseup() 123 | }) 124 | 125 | it('should not modify any value if new range would be larger than maxRange when moving minH', function() { 126 | helper.fireMousedown(helper.slider.minH, 0) 127 | var expectedValue = 30 128 | helper.moveMouseToValue(expectedValue) 129 | expect(helper.scope.slider.min).to.equal(45) 130 | }) 131 | 132 | it('should not modify any value if new range would be larger than maxRange when moving maxH', function() { 133 | helper.fireMousedown(helper.slider.maxH, 0) 134 | var expectedValue = 70 135 | helper.moveMouseToValue(expectedValue) 136 | expect(helper.scope.slider.max).to.equal(55) 137 | }) 138 | 139 | it('should modify the min value if new range is smaller than maxRange when moving minH', function() { 140 | helper.fireMousedown(helper.slider.minH, 0) 141 | var expectedValue = 50 142 | helper.moveMouseToValue(expectedValue) 143 | expect(helper.scope.slider.min).to.equal(expectedValue) 144 | }) 145 | 146 | it('should modify the max value if new range is smaller than than maxRange when moving maxH', function() { 147 | helper.fireMousedown(helper.slider.maxH, 0) 148 | var expectedValue = 50 149 | helper.moveMouseToValue(expectedValue) 150 | expect(helper.scope.slider.max).to.equal(expectedValue) 151 | }) 152 | }) 153 | 154 | describe('Right to left Mouse controls - minRange!=0 Range Horizontal', function() { 155 | var helper, RzSliderOptions, $rootScope, $timeout 156 | 157 | beforeEach(module('test-helper')) 158 | 159 | beforeEach(inject(function( 160 | TestHelper, 161 | _RzSliderOptions_, 162 | _$rootScope_, 163 | _$timeout_ 164 | ) { 165 | helper = TestHelper 166 | RzSliderOptions = _RzSliderOptions_ 167 | $rootScope = _$rootScope_ 168 | $timeout = _$timeout_ 169 | })) 170 | 171 | afterEach(function() { 172 | helper.clean() 173 | }) 174 | 175 | beforeEach(function() { 176 | var sliderConf = { 177 | min: 45, 178 | max: 55, 179 | options: { 180 | floor: 0, 181 | ceil: 100, 182 | minRange: 10, 183 | rightToLeft: true, 184 | }, 185 | } 186 | helper.createRangeSlider(sliderConf) 187 | }) 188 | afterEach(function() { 189 | // to clean document listener 190 | helper.fireMouseup() 191 | }) 192 | 193 | it('should not modify any value if new range would be smaller than minRange when moving minH', function() { 194 | helper.fireMousedown(helper.slider.minH, 0) 195 | var expectedValue = 50 196 | helper.moveMouseToValue(expectedValue) 197 | expect(helper.scope.slider.min).to.equal(45) 198 | }) 199 | 200 | it('should not modify any value if new range would be smaller than minRange when moving maxH', function() { 201 | helper.fireMousedown(helper.slider.maxH, 0) 202 | var expectedValue = 50 203 | helper.moveMouseToValue(expectedValue) 204 | expect(helper.scope.slider.max).to.equal(55) 205 | }) 206 | 207 | it('should modify the min value if new range is larger than minRange when moving minH', function() { 208 | helper.fireMousedown(helper.slider.minH, 0) 209 | var expectedValue = 30 210 | helper.moveMouseToValue(expectedValue) 211 | expect(helper.scope.slider.min).to.equal(expectedValue) 212 | }) 213 | 214 | it('should modify the max value if new range is larger than than minRange when moving maxH', function() { 215 | helper.fireMousedown(helper.slider.maxH, 0) 216 | var expectedValue = 70 217 | helper.moveMouseToValue(expectedValue) 218 | expect(helper.scope.slider.max).to.equal(expectedValue) 219 | }) 220 | 221 | it('should modify the min value if switch min/max with a value large enough', function() { 222 | helper.fireMousedown(helper.slider.minH, 0) 223 | var expectedValue = 80 224 | helper.moveMouseToValue(expectedValue) 225 | expect(helper.scope.slider.min).to.equal(55) 226 | expect(helper.scope.slider.max).to.equal(expectedValue) 227 | }) 228 | 229 | it('should modify the max value if switch min/max with a value large enough', function() { 230 | helper.fireMousedown(helper.slider.maxH, 0) 231 | var expectedValue = 20 232 | helper.moveMouseToValue(expectedValue) 233 | expect(helper.scope.slider.min).to.equal(expectedValue) 234 | expect(helper.scope.slider.max).to.equal(45) 235 | }) 236 | }) 237 | })() 238 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/noSwitching-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - noSwitching Range Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 45, 28 | max: 55, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | noSwitching: true, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should not switch min and max handles if minH is dragged after maxH', function() { 43 | helper.fireMousedown(helper.slider.minH, 0) 44 | var expectedValue = 60 45 | helper.moveMouseToValue(expectedValue) 46 | expect(helper.scope.slider.min).to.equal(55) 47 | }) 48 | 49 | it('should not switch min and max handles if maxH is dragged before minH', function() { 50 | helper.fireMousedown(helper.slider.maxH, 0) 51 | var expectedValue = 20 52 | helper.moveMouseToValue(expectedValue) 53 | expect(helper.scope.slider.max).to.equal(45) 54 | }) 55 | 56 | it('should move minH if minH==maxH and click is on the left side of the bar', function() { 57 | helper.scope.slider.min = helper.scope.slider.max = 50 58 | helper.scope.$digest() 59 | 60 | var expectedValue = 30, 61 | position = helper.getMousePosition(expectedValue) 62 | 63 | helper.fireMousedown(helper.slider.fullBar, position) 64 | 65 | expect(helper.scope.slider.min).to.equal(30) 66 | expect(helper.scope.slider.max).to.equal(50) 67 | }) 68 | 69 | it('should move maxH if minH==maxH and click is on the right side of the bar', function() { 70 | helper.scope.slider.min = helper.scope.slider.max = 50 71 | helper.scope.$digest() 72 | 73 | var expectedValue = 70, 74 | position = helper.getMousePosition(expectedValue) 75 | 76 | helper.fireMousedown(helper.slider.fullBar, position) 77 | 78 | expect(helper.scope.slider.min).to.equal(50) 79 | expect(helper.scope.slider.max).to.equal(70) 80 | }) 81 | }) 82 | 83 | describe('Right to left Mouse controls - noSwitching Range Horizontal', function() { 84 | var helper, RzSliderOptions, $rootScope, $timeout 85 | 86 | beforeEach(module('test-helper')) 87 | 88 | beforeEach(inject(function( 89 | TestHelper, 90 | _RzSliderOptions_, 91 | _$rootScope_, 92 | _$timeout_ 93 | ) { 94 | helper = TestHelper 95 | RzSliderOptions = _RzSliderOptions_ 96 | $rootScope = _$rootScope_ 97 | $timeout = _$timeout_ 98 | })) 99 | 100 | afterEach(function() { 101 | helper.clean() 102 | }) 103 | 104 | beforeEach(function() { 105 | var sliderConf = { 106 | min: 45, 107 | max: 55, 108 | options: { 109 | floor: 0, 110 | ceil: 100, 111 | noSwitching: true, 112 | rightToLeft: true, 113 | }, 114 | } 115 | helper.createRangeSlider(sliderConf) 116 | }) 117 | afterEach(function() { 118 | // to clean document listener 119 | helper.fireMouseup() 120 | }) 121 | 122 | it('should not switch min and max handles if minH is dragged after maxH', function() { 123 | helper.fireMousedown(helper.slider.minH, 0) 124 | var expectedValue = 60 125 | helper.moveMouseToValue(expectedValue) 126 | expect(helper.scope.slider.min).to.equal(55) 127 | }) 128 | 129 | it('should not switch min and max handles if maxH is dragged before minH', function() { 130 | helper.fireMousedown(helper.slider.maxH, 0) 131 | var expectedValue = 20 132 | helper.moveMouseToValue(expectedValue) 133 | expect(helper.scope.slider.max).to.equal(45) 134 | }) 135 | 136 | it('should move minH if minH==maxH and click is on the left side of the bar', function() { 137 | helper.scope.slider.min = helper.scope.slider.max = 50 138 | helper.scope.$digest() 139 | 140 | var expectedValue = 30, 141 | position = helper.getMousePosition(expectedValue) 142 | 143 | helper.fireMousedown(helper.slider.fullBar, position) 144 | 145 | expect(helper.scope.slider.min).to.equal(30) 146 | expect(helper.scope.slider.max).to.equal(50) 147 | }) 148 | 149 | it('should move maxH if minH==maxH and click is on the right side of the bar', function() { 150 | helper.scope.slider.min = helper.scope.slider.max = 50 151 | helper.scope.$digest() 152 | 153 | var expectedValue = 70, 154 | position = helper.getMousePosition(expectedValue) 155 | 156 | helper.fireMousedown(helper.slider.fullBar, position) 157 | 158 | expect(helper.scope.slider.min).to.equal(50) 159 | expect(helper.scope.slider.max).to.equal(70) 160 | }) 161 | }) 162 | })() 163 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/onlyBindHandles-single-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - onlyBindHandles Single Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | value: 0, 28 | options: { 29 | floor: 0, 30 | ceil: 100, 31 | showTicks: true, 32 | onlyBindHandles: true, 33 | }, 34 | } 35 | helper.createSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should handle click and drag on minH correctly when mouse is on the middle', function() { 43 | sinon.spy(helper.slider, 'positionTrackingHandle') 44 | sinon.spy(helper.slider, 'callOnChange') 45 | helper.fireMousedown(helper.slider.minH, 0) 46 | var expectedValue = 50 47 | helper.moveMouseToValue(expectedValue) 48 | expect(helper.scope.slider.value).to.equal(expectedValue) 49 | expect(helper.slider.positionTrackingHandle.callCount).to.equal(1) 50 | expect(helper.slider.callOnChange.callCount).to.equal(1) 51 | }) 52 | 53 | it('should do nothing when a click happen on another element than the handle', function() { 54 | helper.scope.slider.value = 100 55 | helper.scope.$digest() 56 | 57 | sinon.spy(helper.slider, 'positionTrackingHandle') 58 | helper.fireMousedown(helper.slider.selBar, 0) 59 | helper.fireMousedown(helper.slider.fullBar, 0) 60 | helper.fireMousedown(helper.slider.ticks, 0) 61 | 62 | expect(helper.scope.slider.value).to.equal(100) 63 | helper.slider.positionTrackingHandle.called.should.be.false 64 | }) 65 | }) 66 | 67 | describe('Right to left Mouse controls - onlyBindHandles Single Horizontal', function() { 68 | var helper, RzSliderOptions, $rootScope, $timeout 69 | 70 | beforeEach(module('test-helper')) 71 | 72 | beforeEach(inject(function( 73 | TestHelper, 74 | _RzSliderOptions_, 75 | _$rootScope_, 76 | _$timeout_ 77 | ) { 78 | helper = TestHelper 79 | RzSliderOptions = _RzSliderOptions_ 80 | $rootScope = _$rootScope_ 81 | $timeout = _$timeout_ 82 | })) 83 | 84 | afterEach(function() { 85 | helper.clean() 86 | }) 87 | 88 | beforeEach(function() { 89 | var sliderConf = { 90 | value: 0, 91 | options: { 92 | floor: 0, 93 | ceil: 100, 94 | showTicks: true, 95 | onlyBindHandles: true, 96 | rightToLeft: true, 97 | }, 98 | } 99 | helper.createSlider(sliderConf) 100 | }) 101 | afterEach(function() { 102 | // to clean document listener 103 | helper.fireMouseup() 104 | }) 105 | 106 | it('should handle click and drag on minH correctly when mouse is on the middle', function() { 107 | sinon.spy(helper.slider, 'positionTrackingHandle') 108 | sinon.spy(helper.slider, 'callOnChange') 109 | helper.fireMousedown(helper.slider.minH, 0) 110 | var expectedValue = 50 111 | helper.moveMouseToValue(expectedValue) 112 | expect(helper.scope.slider.value).to.equal(expectedValue) 113 | expect(helper.slider.positionTrackingHandle.callCount).to.equal(1) 114 | expect(helper.slider.callOnChange.callCount).to.equal(1) 115 | }) 116 | 117 | it('should do nothing when a click happen on another element than the handle', function() { 118 | helper.scope.slider.value = 100 119 | helper.scope.$digest() 120 | 121 | sinon.spy(helper.slider, 'positionTrackingHandle') 122 | helper.fireMousedown(helper.slider.selBar, 0) 123 | helper.fireMousedown(helper.slider.fullBar, 0) 124 | helper.fireMousedown(helper.slider.ticks, 0) 125 | 126 | expect(helper.scope.slider.value).to.equal(100) 127 | helper.slider.positionTrackingHandle.called.should.be.false 128 | }) 129 | }) 130 | })() 131 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/pushRange-range-slider-horizontal-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - pushRange Range Horizontal', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 45, 28 | max: 55, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | pushRange: true, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | afterEach(function() { 38 | // to clean document listener 39 | helper.fireMouseup() 40 | }) 41 | 42 | it('should push maxH when moving minH above it', function() { 43 | helper.fireMousedown(helper.slider.minH, 0) 44 | helper.moveMouseToValue(60) 45 | expect(helper.scope.slider.min).to.equal(60) 46 | expect(helper.scope.slider.max).to.equal(61) 47 | }) 48 | 49 | it('should push minH when moving maxH below it', function() { 50 | helper.fireMousedown(helper.slider.maxH, 0) 51 | helper.moveMouseToValue(40) 52 | expect(helper.scope.slider.min).to.equal(39) 53 | expect(helper.scope.slider.max).to.equal(40) 54 | }) 55 | 56 | it('should not move maxH above ceil when moving minH to ceil', function() { 57 | helper.fireMousedown(helper.slider.minH, 0) 58 | helper.moveMouseToValue(100) 59 | expect(helper.scope.slider.min).to.equal(99) 60 | expect(helper.scope.slider.max).to.equal(100) 61 | }) 62 | 63 | it('should not move minH below floor when moving maxH to floor', function() { 64 | helper.fireMousedown(helper.slider.maxH, 0) 65 | helper.moveMouseToValue(0) 66 | expect(helper.scope.slider.min).to.equal(0) 67 | expect(helper.scope.slider.max).to.equal(1) 68 | }) 69 | 70 | it('should push maxH according to step', function() { 71 | helper.scope.slider.options.step = 5 72 | helper.scope.$digest() 73 | 74 | helper.fireMousedown(helper.slider.minH, 0) 75 | helper.moveMouseToValue(60) 76 | expect(helper.scope.slider.min).to.equal(60) 77 | expect(helper.scope.slider.max).to.equal(65) 78 | }) 79 | 80 | it('should push minH according to step', function() { 81 | helper.scope.slider.options.step = 5 82 | helper.scope.$digest() 83 | 84 | helper.fireMousedown(helper.slider.maxH, 0) 85 | helper.moveMouseToValue(40) 86 | expect(helper.scope.slider.min).to.equal(35) 87 | expect(helper.scope.slider.max).to.equal(40) 88 | }) 89 | 90 | it('should push maxH according to minRange when both step and minRange are defined', function() { 91 | helper.scope.slider.options.step = 5 92 | helper.scope.slider.options.minRange = 10 93 | helper.scope.$digest() 94 | 95 | helper.fireMousedown(helper.slider.minH, 0) 96 | helper.moveMouseToValue(60) 97 | expect(helper.scope.slider.min).to.equal(60) 98 | expect(helper.scope.slider.max).to.equal(70) 99 | }) 100 | 101 | it('should push minH according to minRange when both step and minRange are defined', function() { 102 | helper.scope.slider.options.step = 5 103 | helper.scope.slider.options.minRange = 10 104 | helper.scope.$digest() 105 | 106 | helper.fireMousedown(helper.slider.maxH, 0) 107 | helper.moveMouseToValue(40) 108 | expect(helper.scope.slider.min).to.equal(30) 109 | expect(helper.scope.slider.max).to.equal(40) 110 | }) 111 | 112 | it('should push maxH according to minRange when minRange is 0', function() { 113 | helper.scope.slider.options.step = 5 114 | helper.scope.slider.options.minRange = 0 115 | helper.scope.$digest() 116 | 117 | helper.fireMousedown(helper.slider.minH, 0) 118 | helper.moveMouseToValue(60) 119 | expect(helper.scope.slider.min).to.equal(60) 120 | expect(helper.scope.slider.max).to.equal(60) 121 | }) 122 | 123 | it('should push minH according to minRange when minRange is 0', function() { 124 | helper.scope.slider.options.step = 5 125 | helper.scope.slider.options.minRange = 0 126 | helper.scope.$digest() 127 | 128 | helper.fireMousedown(helper.slider.maxH, 0) 129 | helper.moveMouseToValue(40) 130 | expect(helper.scope.slider.min).to.equal(40) 131 | expect(helper.scope.slider.max).to.equal(40) 132 | }) 133 | 134 | it('should pull minH when moving maxH above maxRange', function() { 135 | helper.scope.slider.options.maxRange = 15 136 | helper.scope.$digest() 137 | 138 | helper.fireMousedown(helper.slider.maxH, 0) 139 | helper.moveMouseToValue(80) 140 | expect(helper.scope.slider.min).to.equal(65) 141 | expect(helper.scope.slider.max).to.equal(80) 142 | }) 143 | 144 | it('should pull maxH when moving minH above maxRange', function() { 145 | helper.scope.slider.options.maxRange = 15 146 | helper.scope.$digest() 147 | 148 | helper.fireMousedown(helper.slider.minH, 0) 149 | helper.moveMouseToValue(20) 150 | expect(helper.scope.slider.min).to.equal(20) 151 | expect(helper.scope.slider.max).to.equal(35) 152 | }) 153 | }) 154 | })() 155 | -------------------------------------------------------------------------------- /tests/specs/mouse-controls/restricted-range-slider-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Mouse controls - Restricted Range', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 25, 28 | max: 85, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | restrictedRange: { 33 | from: 30, 34 | to: 70, 35 | }, 36 | }, 37 | } 38 | helper.createRangeSlider(sliderConf) 39 | }) 40 | 41 | afterEach(function() { 42 | // to clean document listener 43 | helper.fireMouseup() 44 | }) 45 | 46 | it('should be able to modify minH below restrictedRange.from', function() { 47 | helper.fireMousedown(helper.slider.minH, 0) 48 | var attemptedValue = 25 49 | helper.moveMouseToValue(attemptedValue) 50 | expect(helper.scope.slider.min).to.equal(25) 51 | }) 52 | 53 | it('should not be able to modify minH above restrictedRange.from', function() { 54 | helper.fireMousedown(helper.slider.minH, 0) 55 | var attemptedValue = 40 56 | helper.moveMouseToValue(attemptedValue) 57 | expect(helper.scope.slider.min).to.equal(30) 58 | }) 59 | 60 | it('should be able to modify maxH above restrictedRange.to', function() { 61 | helper.fireMousedown(helper.slider.maxH, 0) 62 | var attemptedValue = 78 63 | helper.moveMouseToValue(attemptedValue) 64 | expect(helper.scope.slider.max).to.equal(78) 65 | }) 66 | 67 | it('should not be able to modify maxH below restrictedRange.to', function() { 68 | helper.fireMousedown(helper.slider.maxH, 0) 69 | var attemptedValue = 50 70 | helper.moveMouseToValue(attemptedValue) 71 | expect(helper.scope.slider.max).to.equal(70) 72 | }) 73 | }) 74 | 75 | describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null Range Horizontal', function() { 76 | var helper, RzSliderOptions, $rootScope, $timeout 77 | 78 | beforeEach(module('test-helper')) 79 | 80 | beforeEach(inject(function( 81 | TestHelper, 82 | _RzSliderOptions_, 83 | _$rootScope_, 84 | _$timeout_ 85 | ) { 86 | helper = TestHelper 87 | RzSliderOptions = _RzSliderOptions_ 88 | $rootScope = _$rootScope_ 89 | $timeout = _$timeout_ 90 | })) 91 | 92 | afterEach(function() { 93 | helper.clean() 94 | }) 95 | 96 | beforeEach(function() { 97 | var sliderConf = { 98 | min: 45, 99 | max: 55, 100 | options: { 101 | floor: 0, 102 | ceil: 100, 103 | restrictedRange: { 104 | from: 30, 105 | to: 70, 106 | }, 107 | rightToLeft: true, 108 | }, 109 | } 110 | helper.createRangeSlider(sliderConf) 111 | }) 112 | afterEach(function() { 113 | // to clean document listener 114 | helper.fireMouseup() 115 | }) 116 | 117 | it('should be able to modify minH below restrictedRange.from', function() { 118 | helper.fireMousedown(helper.slider.minH, 0) 119 | var attemptedValue = 25 120 | helper.moveMouseToValue(attemptedValue) 121 | expect(helper.scope.slider.min).to.equal(25) 122 | }) 123 | 124 | it('should not be able to modify minH above restrictedRange.from', function() { 125 | helper.fireMousedown(helper.slider.minH, 0) 126 | var attemptedValue = 40 127 | helper.moveMouseToValue(attemptedValue) 128 | expect(helper.scope.slider.min).to.equal(30) 129 | }) 130 | 131 | it('should be able to modify maxH above restrictedRange.to', function() { 132 | helper.fireMousedown(helper.slider.maxH, 0) 133 | var attemptedValue = 78 134 | helper.moveMouseToValue(attemptedValue) 135 | expect(helper.scope.slider.max).to.equal(78) 136 | }) 137 | 138 | it('should not be able to modify maxH below restrictedRange.to', function() { 139 | helper.fireMousedown(helper.slider.maxH, 0) 140 | var attemptedValue = 50 141 | helper.moveMouseToValue(attemptedValue) 142 | expect(helper.scope.slider.max).to.equal(70) 143 | }) 144 | }) 145 | })() 146 | -------------------------------------------------------------------------------- /tests/specs/range-slider-init-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Range slider initialisation - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | min: 10, 28 | max: 90, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | step: 10, 33 | }, 34 | } 35 | helper.createRangeSlider(sliderConf) 36 | }) 37 | 38 | it('should exist compiled and with correct config', function() { 39 | expect(helper.element.find('span')).to.have.length(17) 40 | expect(helper.slider.range).to.be.true 41 | expect(helper.slider.valueRange).to.equal(100) 42 | expect(helper.slider.maxH.css('display')).to.equal('') 43 | }) 44 | 45 | it('should watch rzSliderHigh and reflow the slider accordingly', function() { 46 | sinon.spy(helper.slider, 'onHighHandleChange') 47 | helper.scope.slider.max = 95 48 | helper.scope.$digest() 49 | helper.slider.onHighHandleChange.called.should.be.true 50 | }) 51 | 52 | it('should switch to a single slider when rzSliderHigh is unset after init', function() { 53 | sinon.spy(helper.slider, 'onHighHandleChange') 54 | sinon.spy(helper.slider, 'applyOptions') 55 | sinon.spy(helper.slider, 'resetSlider') 56 | helper.scope.slider.max = undefined 57 | helper.scope.$digest() 58 | helper.slider.onHighHandleChange.called.should.be.false 59 | helper.slider.applyOptions.called.should.be.true 60 | helper.slider.resetSlider.called.should.be.true 61 | }) 62 | 63 | it('should switch to a range slider when rzSliderHigh is set after init', function() { 64 | helper.scope.slider.max = undefined 65 | helper.scope.$digest() 66 | sinon.spy(helper.slider, 'onHighHandleChange') 67 | sinon.spy(helper.slider, 'applyOptions') 68 | sinon.spy(helper.slider, 'resetSlider') 69 | helper.scope.slider.max = 100 70 | helper.scope.$digest() 71 | helper.slider.onHighHandleChange.called.should.be.true 72 | helper.slider.applyOptions.called.should.be.true 73 | helper.slider.resetSlider.called.should.be.true 74 | }) 75 | 76 | it('should round the model value to the step', function() { 77 | helper.scope.slider.min = 23 78 | helper.scope.slider.max = 84 79 | helper.scope.$digest() 80 | expect(helper.scope.slider.min).to.equal(20) 81 | expect(helper.scope.slider.max).to.equal(80) 82 | 83 | helper.scope.slider.min = 25 84 | helper.scope.slider.max = 95 85 | helper.scope.$digest() 86 | $timeout.flush() //to flush the throttle function 87 | expect(helper.scope.slider.min).to.equal(30) 88 | expect(helper.scope.slider.max).to.equal(100) 89 | }) 90 | 91 | it('should reset everything on rzSliderForceRender', function() { 92 | sinon.spy(helper.slider, 'resetLabelsValue') 93 | sinon.spy(helper.slider, 'resetSlider') 94 | sinon.spy(helper.slider, 'onLowHandleChange') 95 | sinon.spy(helper.slider, 'onHighHandleChange') 96 | 97 | helper.scope.$broadcast('rzSliderForceRender') 98 | 99 | helper.slider.resetLabelsValue.called.should.be.true 100 | helper.slider.resetSlider.called.should.be.true 101 | helper.slider.onLowHandleChange.called.should.be.true 102 | helper.slider.onHighHandleChange.called.should.be.true 103 | }) 104 | }) 105 | })() 106 | -------------------------------------------------------------------------------- /tests/specs/rz-slider-options-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('RzSliderOptions - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | it('should have a correct getOptions method that apply custom options', function() { 26 | var defaultOpts = RzSliderOptions.getOptions() 27 | var customOpts = { 28 | showTicks: true, 29 | } 30 | 31 | var expectedOpts = angular.extend({}, defaultOpts, customOpts) 32 | var options = RzSliderOptions.getOptions(customOpts) 33 | expect(options).to.deep.equal(expectedOpts) 34 | }) 35 | 36 | it('should have a correct options method to update the global options', function() { 37 | var defaultOpts = RzSliderOptions.getOptions() 38 | var globalOpts = { 39 | showTicks: true, 40 | } 41 | RzSliderOptions.options(globalOpts) 42 | 43 | var expectedOpts = angular.extend({}, defaultOpts, globalOpts) 44 | var options = RzSliderOptions.getOptions() 45 | expect(options).to.deep.equal(expectedOpts) 46 | }) 47 | }) 48 | })() 49 | -------------------------------------------------------------------------------- /tests/specs/scale-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Scale test - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | describe('Linear scale - ', function() { 26 | beforeEach(function() { 27 | var sliderConf = { 28 | value: 10, 29 | options: { 30 | floor: 0, 31 | ceil: 100, 32 | step: 10, 33 | }, 34 | } 35 | helper.createSlider(sliderConf) 36 | }) 37 | 38 | it('should have a correct linearValueToPosition', function() { 39 | var actual = helper.slider.linearValueToPosition(0, 0, 50) 40 | expect(actual).to.equal(0) 41 | actual = helper.slider.linearValueToPosition(25, 0, 50) 42 | expect(actual.toFixed(2)).to.equal('0.50') 43 | actual = helper.slider.linearValueToPosition(50, 0, 50) 44 | expect(actual).to.equal(1) 45 | }) 46 | 47 | it('should have a correct linearPositionToValue', function() { 48 | var actual = helper.slider.linearPositionToValue(0, 0, 50) 49 | expect(actual).to.equal(0) 50 | actual = helper.slider.linearPositionToValue(0.5, 0, 50) 51 | expect(actual).to.equal(25) 52 | actual = Math.round(helper.slider.linearPositionToValue(1, 0, 50)) 53 | expect(actual).to.equal(50) 54 | }) 55 | }) 56 | 57 | describe('Logarithm scale - ', function() { 58 | beforeEach(function() { 59 | var sliderConf = { 60 | value: 10, 61 | options: { 62 | floor: 1, 63 | ceil: 100, 64 | step: 10, 65 | logScale: true, 66 | }, 67 | } 68 | helper.createSlider(sliderConf) 69 | }) 70 | 71 | it('should throw an error if floor is 0', function() { 72 | var testFn = function() { 73 | helper.scope.slider.options.floor = 0 74 | helper.scope.$digest() 75 | } 76 | expect(testFn).to.throw("Can't use floor=0 with logarithmic scale") 77 | }) 78 | 79 | it('should have a correct logValueToPosition', function() { 80 | var actual = helper.slider.logValueToPosition(1, 1, 50) 81 | expect(actual).to.equal(0) 82 | actual = helper.slider.logValueToPosition(25, 1, 50) 83 | expect(actual.toFixed(2)).to.equal('0.82') 84 | actual = helper.slider.logValueToPosition(50, 1, 50) 85 | expect(actual).to.equal(1) 86 | }) 87 | 88 | it('should have a correct logPositionToValue', function() { 89 | var actual = helper.slider.logPositionToValue(0, 1, 50) 90 | expect(actual).to.equal(1) 91 | actual = helper.slider.logPositionToValue(0.5, 1, 50) 92 | expect(actual.toFixed(2)).to.equal('7.07') 93 | actual = Math.round(helper.slider.logPositionToValue(1, 1, 50)) 94 | expect(actual).to.equal(50) 95 | }) 96 | 97 | it('should handle click and drag on minH correctly', function() { 98 | helper.fireMousedown(helper.slider.minH, 0) 99 | var expectedValue = 50, 100 | position = helper.getMousePosition(expectedValue) 101 | helper.fireMousemove(position) 102 | expect(helper.scope.slider.value).to.equal(expectedValue + 1) // + 1 because we start at 1 103 | }) 104 | }) 105 | 106 | describe('Custom scale (here a x^2 scale)- ', function() { 107 | beforeEach(function() { 108 | var sliderConf = { 109 | value: 50, 110 | options: { 111 | floor: 0, 112 | ceil: 100, 113 | step: 10, 114 | customValueToPosition: function(val, minVal, maxVal) { 115 | val = Math.sqrt(val) 116 | minVal = Math.sqrt(minVal) 117 | maxVal = Math.sqrt(maxVal) 118 | var range = maxVal - minVal 119 | return (val - minVal) / range 120 | }, 121 | customPositionToValue: function(percent, minVal, maxVal) { 122 | minVal = Math.sqrt(minVal) 123 | maxVal = Math.sqrt(maxVal) 124 | var value = percent * (maxVal - minVal) + minVal 125 | return Math.pow(value, 2) 126 | }, 127 | }, 128 | } 129 | helper.createSlider(sliderConf) 130 | }) 131 | ;-it('should have a correct valueToPosition', function() { 132 | var actual = helper.slider.valueToPosition(0) 133 | expect(actual).to.equal(0) 134 | actual = helper.slider.valueToPosition(25) 135 | expect(actual).to.equal(helper.slider.maxPos / 2) 136 | actual = helper.slider.valueToPosition(100) 137 | expect(actual).to.equal(helper.slider.maxPos) 138 | }) 139 | 140 | it('should have a correct positionToValue', function() { 141 | var actual = helper.slider.positionToValue(0) 142 | expect(actual).to.equal(0) 143 | actual = helper.slider.positionToValue(helper.slider.maxPos / 2) 144 | expect(actual).to.equal(25) 145 | actual = Math.round(helper.slider.positionToValue(helper.slider.maxPos)) 146 | expect(actual).to.equal(100) 147 | }) 148 | 149 | it('should handle click and drag on minH correctly', function() { 150 | helper.fireMousedown(helper.slider.minH, 0) 151 | var expectedValue = 50, 152 | position = helper.getMousePosition(expectedValue) 153 | helper.fireMousemove(position) 154 | expect(helper.scope.slider.value).to.equal(expectedValue) 155 | }) 156 | }) 157 | }) 158 | })() 159 | -------------------------------------------------------------------------------- /tests/specs/single-slider-init-test.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | describe('Single slider initialisation - ', function() { 5 | var helper, RzSliderOptions, $rootScope, $timeout 6 | 7 | beforeEach(module('test-helper')) 8 | 9 | beforeEach(inject(function( 10 | TestHelper, 11 | _RzSliderOptions_, 12 | _$rootScope_, 13 | _$timeout_ 14 | ) { 15 | helper = TestHelper 16 | RzSliderOptions = _RzSliderOptions_ 17 | $rootScope = _$rootScope_ 18 | $timeout = _$timeout_ 19 | })) 20 | 21 | afterEach(function() { 22 | helper.clean() 23 | }) 24 | 25 | beforeEach(function() { 26 | var sliderConf = { 27 | value: 10, 28 | options: { 29 | floor: 0, 30 | ceil: 100, 31 | step: 10, 32 | }, 33 | } 34 | helper.createSlider(sliderConf) 35 | }) 36 | 37 | it('should exist compiled and with correct config', function() { 38 | expect(helper.element.find('span')).to.have.length(17) 39 | expect(helper.slider.range).to.be.false 40 | expect(helper.slider.valueRange).to.equal(100) 41 | expect(helper.slider.maxH.css('display')).to.equal('none') 42 | }) 43 | 44 | it('should watch rzSliderModel and reflow the slider accordingly', function() { 45 | sinon.spy(helper.slider, 'onLowHandleChange') 46 | helper.scope.slider.value = 54 47 | helper.scope.$digest() 48 | helper.slider.onLowHandleChange.called.should.be.true 49 | }) 50 | 51 | it('should watch rzSliderOptions and reset the slider accordingly', function() { 52 | sinon.spy(helper.slider, 'applyOptions') 53 | sinon.spy(helper.slider, 'resetSlider') 54 | helper.scope.slider.options.showTicks = true 55 | helper.scope.$digest() 56 | helper.slider.applyOptions.called.should.be.true 57 | helper.slider.resetSlider.called.should.be.true 58 | }) 59 | 60 | it('should round the model value to the step by default', function() { 61 | helper.scope.slider.value = 54 62 | helper.scope.$digest() 63 | expect(helper.scope.slider.value).to.equal(50) 64 | 65 | helper.scope.slider.value = 55 66 | helper.scope.$digest() 67 | $timeout.flush() //to flush the throttle function since we modify twice in a row 68 | expect(helper.scope.slider.value).to.equal(60) 69 | }) 70 | 71 | it('should call calcViewDimensions() on reCalcViewDimensions', function() { 72 | sinon.spy(helper.slider, 'calcViewDimensions') 73 | helper.scope.$broadcast('reCalcViewDimensions') 74 | helper.slider.calcViewDimensions.called.should.be.true 75 | }) 76 | 77 | it('should reset everything on rzSliderForceRender', function() { 78 | sinon.spy(helper.slider, 'resetLabelsValue') 79 | sinon.spy(helper.slider, 'resetSlider') 80 | sinon.spy(helper.slider, 'onLowHandleChange') 81 | 82 | helper.scope.$broadcast('rzSliderForceRender') 83 | 84 | helper.slider.resetLabelsValue.called.should.be.true 85 | helper.slider.resetSlider.called.should.be.true 86 | helper.slider.onLowHandleChange.called.should.be.true 87 | }) 88 | 89 | it('should call calcViewDimensions() on window resize event', inject(function( 90 | $window 91 | ) { 92 | sinon.spy(helper.slider, 'calcViewDimensions') 93 | angular.element($window).triggerHandler('resize') 94 | helper.slider.calcViewDimensions.called.should.be.true 95 | })) 96 | 97 | it('should unregister all dom events on $destroy', inject(function( 98 | $window 99 | ) { 100 | sinon.spy(helper.slider, 'calcViewDimensions') 101 | sinon.spy(helper.slider, 'unbindEvents') 102 | 103 | helper.scope.$broadcast('$destroy') 104 | angular.element($window).triggerHandler('resize') 105 | 106 | helper.slider.calcViewDimensions.called.should.be.false 107 | helper.slider.unbindEvents.called.should.be.true 108 | })) 109 | }) 110 | })() 111 | -------------------------------------------------------------------------------- /tests/specs/test-template.js: -------------------------------------------------------------------------------- 1 | ;(function() { 2 | 'use strict' 3 | 4 | /** 5 | * Your test file should end with "-test.js" to be executed. 6 | * Don't modify this file but copy it to create a new test group 7 | */ 8 | 9 | describe('Test group description - ', function() { 10 | var helper, RzSliderOptions, $rootScope, $timeout 11 | 12 | beforeEach(module('test-helper')) 13 | 14 | beforeEach(inject(function( 15 | TestHelper, 16 | _RzSliderOptions_, 17 | _$rootScope_, 18 | _$timeout_ 19 | ) { 20 | helper = TestHelper 21 | RzSliderOptions = _RzSliderOptions_ 22 | $rootScope = _$rootScope_ 23 | $timeout = _$timeout_ 24 | })) 25 | 26 | afterEach(function() { 27 | helper.clean() 28 | }) 29 | 30 | /* 31 | The slider that will be used for each test. 32 | If you want to create a specific one for each test, then create it directly in the "it" blocks 33 | */ 34 | beforeEach(function() { 35 | var sliderConf = { 36 | value: 10, 37 | options: { 38 | floor: 0, 39 | ceil: 100, 40 | step: 10, 41 | }, 42 | } 43 | helper.createSlider(sliderConf) 44 | }) 45 | 46 | it('should be true', function() {}) 47 | }) 48 | })() 49 | --------------------------------------------------------------------------------