├── CHANGE.md ├── LICENSE.md ├── README.md ├── composer.json └── src ├── Slider.php ├── SliderAsset.php └── assets ├── css ├── bootstrap-slider.css └── bootstrap-slider.min.css └── js ├── bootstrap-slider.js └── bootstrap-slider.min.js /CHANGE.md: -------------------------------------------------------------------------------- 1 | Change Log: `yii2-slider` 2 | ========================= 3 | 4 | ## Version 1.3.3 5 | 6 | **Date:** 05-Jan-2019 7 | 8 | - Update to latest release of bootstrap-slider plugin 9 | - Update bootstrap-slider plugin default value to `0`. 10 | - Move all source code to `src` directory. 11 | - Update README. 12 | 13 | ## Version 1.3.2 14 | 15 | **Date:** 10-Jan-2016 16 | 17 | - Update to latest release of bootstrap-slider plugin 18 | - Enhancements for PJAX based reinitialization. Complements enhancements in kartik-v/yii2-krajee-base#52 and kartik-v/yii2-krajee-base#53. 19 | 20 | ## Version 1.3.1 21 | 22 | **Date:** 05-May-2015 23 | 24 | - (enh #6): Allow 0 to be a valid value 25 | - (enh #7): Enhance widget to use updated plugin registration from Krajee base 26 | - (enh #8): Upgrade plugin to latest release as of 25-Nov-2014. 27 | - (enh #12): New property `pluginConflict` to allow working with other slider plugins. 28 | - (enh #13): Upgrade plugin to latest release as of 05-May-2015. 29 | 30 | ## Version 1.3.0 31 | 32 | **Date:** 10-Nov-2014 33 | 34 | - Set dependency on Krajee base components 35 | - Set release to stable 36 | 37 | ## Version 1.2.0 38 | 39 | **Date:** 27-Oct-2014 40 | 41 | - enh #2: Upgrade plugin to latest release as of 27-Oct-2014. 42 | - Include formatter example in demos for setting custom tooltips. 43 | 44 | ## Version 1.1.0 45 | 46 | **Date:** 07-Jul-2014 47 | 48 | - Bug #1: Fix passing of the array value (or a delimited value set) for range select. 49 | - Bug #4: Fix wrong path for assets folder. 50 | - For range selects, values must be passed concatenated and separated with a `,` (comma). 51 | - Corrected validation of values - ensure only numeric values are passed as required by the plugin. 52 | - PSR4 alias change 53 | 54 | ## Version 1.0.0 55 | 56 | **Date:** 07-May-2014 57 | 58 | Initial release -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 - 2018, Kartik Visweswaran 2 | Krajee.com 3 | All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, 6 | are permitted provided that the following conditions are met: 7 | 8 | * Redistributions of source code must retain the above copyright notice, this 9 | list of conditions and the following disclaimer. 10 | 11 | * Redistributions in binary form must reproduce the above copyright notice, this 12 | list of conditions and the following disclaimer in the documentation and/or 13 | other materials provided with the distribution. 14 | 15 | * Neither the names of Kartik Visweswaran or Krajee nor the names of its 16 | contributors may be used to endorse or promote products derived from 17 | this software without specific prior written permission. 18 | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Krajee Logo 4 | 5 |
6 | yii2-slider 7 |
8 | 10 | Donate 11 | 12 |

13 | 14 | [![Stable Version](https://poser.pugx.org/kartik-v/yii2-slider/v/stable)](https://packagist.org/packages/kartik-v/yii2-slider) 15 | [![Unstable Version](https://poser.pugx.org/kartik-v/yii2-slider/v/unstable)](https://packagist.org/packages/kartik-v/yii2-slider) 16 | [![License](https://poser.pugx.org/kartik-v/yii2-slider/license)](https://packagist.org/packages/kartik-v/yii2-slider) 17 | [![Total Downloads](https://poser.pugx.org/kartik-v/yii2-slider/downloads)](https://packagist.org/packages/kartik-v/yii2-slider) 18 | [![Monthly Downloads](https://poser.pugx.org/kartik-v/yii2-slider/d/monthly)](https://packagist.org/packages/kartik-v/yii2-slider) 19 | [![Daily Downloads](https://poser.pugx.org/kartik-v/yii2-slider/d/daily)](https://packagist.org/packages/kartik-v/yii2-slider) 20 | 21 | An advanced slider input for Yii Framework 2 based on [seiyria/bootstrap-slider plugin](https://github.com/seiyria/bootstrap-slider), which is a fork 22 | of the bootstrap-slider by Stefan Petre from eyecon.ru. The slider input offers these advanced features 23 | 24 | - vertical or horizontal orientation of slider 25 | - setup your minimum and maximum values 26 | - setup your step increments 27 | - range selector (multiple handles to control the range) 28 | - three shapes for handles 29 | - touch capablity and support for touch devices 30 | 31 | Additional enhancements added for this widget (by Krajee): 32 | 33 | - allows to configure slider selection and handle colors. 34 | - preselected styles to color your slider and handles. 35 | - automatically trigger change of base field on slider stop to enforce Yii ActiveField validation 36 | - automatically set plugin options based on base field value (parse array input value for range) 37 | - automatically disable slider based on disabled/readonly options. 38 | 39 | ### Demo 40 | You can see detailed [documentation](http://demos.krajee.com/slider) on usage of the extension. 41 | 42 | ## Latest Release 43 | > Refer the [CHANGE LOG](https://github.com/kartik-v/yii2-slider/blob/master/CHANGE.md) for details on updates to various releases. 44 | 45 | ## Installation 46 | 47 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). 48 | 49 | > NOTE: Check the [composer.json](https://github.com/kartik-v/yii2-slider/blob/master/composer.json) for this extension's requirements and dependencies. Read this [web tip /wiki](http://webtips.krajee.com/setting-composer-minimum-stability-application/) on setting the `minimum-stability` settings for your application's composer.json. 50 | 51 | Either run 52 | 53 | ``` 54 | $ php composer.phar require kartik-v/yii2-slider "dev-master" 55 | ``` 56 | 57 | or add 58 | 59 | ``` 60 | "kartik-v/yii2-slider": "dev-master" 61 | ``` 62 | 63 | to the ```require``` section of your `composer.json` file. 64 | 65 | ## Usage 66 | 67 | ### Slider 68 | 69 | ```php 70 | use kartik\slider\Slider; 71 | echo Slider::widget([ 72 | 'name' => 'slider', 73 | 'sliderColor' => Slider::TYPE_DANGER, 74 | 'handleColor' => Slider::TYPE_DANGER, 75 | 'pluginOptions' => [ 76 | 'orientation' => 'horizontal', 77 | 'handle' => 'round', 78 | 'min' => 0, 79 | 'max' => 255, 80 | 'step' => 1 81 | ], 82 | ]); 83 | ``` 84 | 85 | ## License 86 | 87 | **yii2-slider** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details. 88 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kartik-v/yii2-slider", 3 | "description": "An advanced slider input for Yii Framework 2 for both touch enabled and desktop devices based on bootstrap-slider.", 4 | "keywords": [ 5 | "yii2", 6 | "extension", 7 | "widget", 8 | "slider", 9 | "range", 10 | "bootstrap", 11 | "bootstrap 3", 12 | "bootstrap 4" 13 | ], 14 | "homepage": "https://github.com/kartik-v/yii2-slider", 15 | "type": "yii2-extension", 16 | "license": "BSD-3-Clause", 17 | "authors": [ 18 | { 19 | "name": "Kartik Visweswaran", 20 | "email": "kartikv2@gmail.com", 21 | "homepage": "http://www.krajee.com/" 22 | } 23 | ], 24 | "require": { 25 | "kartik-v/yii2-krajee-base": ">=1.9.8" 26 | }, 27 | "autoload": { 28 | "psr-4": { 29 | "kartik\\slider\\": "src" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/Slider.php: -------------------------------------------------------------------------------- 1 | 21 | * @since 1.0 22 | */ 23 | class Slider extends InputWidget 24 | { 25 | const TYPE_GREY = '#bababa'; 26 | const TYPE_PRIMARY = '#428bca'; 27 | const TYPE_INFO = '#5bc0de'; 28 | const TYPE_SUCCESS = '#5cb85c'; 29 | const TYPE_DANGER = '#d9534f'; 30 | const TYPE_WARNING = '#f0ad4e'; 31 | 32 | /** 33 | * @inheritdoc 34 | */ 35 | public $pluginName = 'slider'; 36 | 37 | /** 38 | * @var bool whether another conflicting Slider plugin like JUI slider exists on the same page. If set to `true` 39 | * the plugin will use a different namespace. If you have the full jQuery UI assets loaded on the page you 40 | * should set this to `true`. 41 | */ 42 | public $pluginConflict = false; 43 | 44 | /** 45 | * @var string background color for the slider handle 46 | */ 47 | public $handleColor; 48 | 49 | /** 50 | * @var string background color for the slider selection 51 | */ 52 | public $sliderColor; 53 | 54 | /** 55 | * @var bool whether input is disabled 56 | */ 57 | private $_isDisabled = false; 58 | 59 | /** 60 | * @inheritdoc 61 | */ 62 | public function run() 63 | { 64 | parent::run(); 65 | $this->pluginName = $this->pluginConflict ? 'bootstrapSlider' : 'slider'; 66 | 67 | if (!empty($this->value) || $this->value === 0 || $this->value === "0") { 68 | if (is_array($this->value)) { 69 | throw new InvalidConfigException("Value cannot be passed as an array. If you wish to setup a range slider, pass the two values together as strings separated with a ',' sign."); 70 | } 71 | if (strpos($this->value, ',') > 0) { 72 | $values = explode(',', $this->value); 73 | static::validateValue($values[0]); 74 | static::validateValue($values[1]); 75 | $this->pluginOptions['value'] = [(float)$values[0], (float)$values[1]]; 76 | $this->pluginOptions['range'] = true; 77 | } else { 78 | static::validateValue($this->value); 79 | $this->pluginOptions['value'] = (float)$this->value; 80 | } 81 | } else { 82 | // initialize value 83 | $this->pluginOptions['value'] = null; 84 | } 85 | 86 | Html::addCssClass($this->options, 'form-control'); 87 | 88 | // initialize if disabled 89 | $this->_isDisabled = ((!empty($this->options['disabled']) && $this->options['disabled']) || 90 | (!empty($this->options['readonly']) && $this->options['readonly'])) || (isset($this->disabled) && 91 | $this->disabled) || (isset($this->readonly) && $this->readonly); 92 | if ($this->_isDisabled) { 93 | $this->pluginOptions['enabled'] = false; 94 | } 95 | 96 | $this->registerAssets(); 97 | echo $this->getInput('textInput'); 98 | } 99 | 100 | /** 101 | * Validates the input value 102 | * 103 | * @param $value 104 | * 105 | * @throws \yii\base\InvalidConfigException 106 | */ 107 | protected static function validateValue($value) 108 | { 109 | if (!is_numeric($value)) { 110 | throw new InvalidConfigException("Invalid value '{$value}' passed. Only numeric values allowed."); 111 | } 112 | } 113 | 114 | /** 115 | * Registers the needed assets 116 | */ 117 | public function registerAssets() 118 | { 119 | $view = $this->getView(); 120 | SliderAsset::register($view); 121 | 122 | // register plugin 123 | $id = "$('#" . $this->options['id'] . "')"; 124 | $this->pluginOptions['id'] = $this->options['id'] . '-slider'; 125 | $this->registerPlugin($this->pluginName); 126 | // register CSS styles 127 | $cssStyle = null; 128 | if (!empty($this->handleColor) && !$this->_isDisabled) { 129 | $isTriangle = (!empty($this->pluginOptions['handle']) && $this->pluginOptions['handle'] == 'triangle'); 130 | $cssStyle = $this->getCssColor('handle', $this->handleColor, $isTriangle); 131 | } 132 | if (!empty($this->sliderColor) && !$this->_isDisabled) { 133 | $cssStyle .= $this->getCssColor('selection', $this->sliderColor); 134 | } 135 | if ($cssStyle != null && !$this->_isDisabled) { 136 | $view->registerCss($cssStyle); 137 | } 138 | 139 | // trigger change event on slider stop, so that client validation 140 | // is triggered for yii active fields 141 | $view->registerJs("{$id}.on('slideStop', function(){{$id}.trigger('change')});"); 142 | } 143 | 144 | /** 145 | * Gets the css background style for a slider element type 146 | * 147 | * @param string $type the element type ('handle' or 'selection') 148 | * @param string $color the hex color string 149 | * @param bool $isTriangle whether the handle displayed is of triangle shape. 150 | * 151 | * @return string 152 | */ 153 | protected function getCssColor($type, $color, $isTriangle = false) 154 | { 155 | $feature = $isTriangle ? 'border-bottom-color' : 'background'; 156 | return "#" . $this->pluginOptions['id'] . " .slider-{$type}{{$feature}:{$color}}"; 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /src/SliderAsset.php: -------------------------------------------------------------------------------- 1 | 17 | * @since 1.0 18 | */ 19 | class SliderAsset extends AssetBundle 20 | { 21 | /** 22 | * @inheritdoc 23 | */ 24 | public function init() 25 | { 26 | $this->setSourcePath(__DIR__ . '/assets'); 27 | $this->setupAssets('css', ['css/bootstrap-slider']); 28 | $this->setupAssets('js', ['js/bootstrap-slider']); 29 | parent::init(); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/css/bootstrap-slider.css: -------------------------------------------------------------------------------- 1 | /*! ======================================================= 2 | VERSION 10.5.0 3 | ========================================================= */ 4 | /*! ========================================================= 5 | * bootstrap-slider.js 6 | * 7 | * Maintainers: 8 | * Kyle Kemp 9 | * - Twitter: @seiyria 10 | * - Github: seiyria 11 | * Rohit Kalkur 12 | * - Twitter: @Rovolutionary 13 | * - Github: rovolution 14 | * 15 | * ========================================================= 16 | * 17 | * bootstrap-slider is released under the MIT License 18 | * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors 19 | * 20 | * Permission is hereby granted, free of charge, to any person 21 | * obtaining a copy of this software and associated documentation 22 | * files (the "Software"), to deal in the Software without 23 | * restriction, including without limitation the rights to use, 24 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 25 | * copies of the Software, and to permit persons to whom the 26 | * Software is furnished to do so, subject to the following 27 | * conditions: 28 | * 29 | * The above copyright notice and this permission notice shall be 30 | * included in all copies or substantial portions of the Software. 31 | * 32 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 33 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 34 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 35 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 36 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 37 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 38 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 39 | * OTHER DEALINGS IN THE SOFTWARE. 40 | * 41 | * ========================================================= */ 42 | .slider { 43 | display: inline-block; 44 | vertical-align: middle; 45 | position: relative; 46 | } 47 | .slider.slider-horizontal { 48 | width: 210px; 49 | height: 20px; 50 | } 51 | .slider.slider-horizontal .slider-track { 52 | height: 10px; 53 | width: 100%; 54 | margin-top: -5px; 55 | top: 50%; 56 | left: 0; 57 | } 58 | .slider.slider-horizontal .slider-selection, 59 | .slider.slider-horizontal .slider-track-low, 60 | .slider.slider-horizontal .slider-track-high { 61 | height: 100%; 62 | top: 0; 63 | bottom: 0; 64 | } 65 | .slider.slider-horizontal .slider-tick, 66 | .slider.slider-horizontal .slider-handle { 67 | margin-left: -10px; 68 | } 69 | .slider.slider-horizontal .slider-tick.triangle, 70 | .slider.slider-horizontal .slider-handle.triangle { 71 | position: relative; 72 | top: 50%; 73 | -ms-transform: translateY(-50%); 74 | transform: translateY(-50%); 75 | border-width: 0 10px 10px 10px; 76 | width: 0; 77 | height: 0; 78 | border-bottom-color: #2e6da4; 79 | margin-top: 0; 80 | } 81 | .slider.slider-horizontal .slider-tick-container { 82 | white-space: nowrap; 83 | position: absolute; 84 | top: 0; 85 | left: 0; 86 | width: 100%; 87 | } 88 | .slider.slider-horizontal .slider-tick-label-container { 89 | white-space: nowrap; 90 | margin-top: 20px; 91 | } 92 | .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { 93 | padding-top: 4px; 94 | display: inline-block; 95 | text-align: center; 96 | } 97 | .slider.slider-horizontal .tooltip { 98 | -ms-transform: translateX(-50%); 99 | transform: translateX(-50%); 100 | } 101 | .slider.slider-horizontal.slider-rtl .slider-track { 102 | left: initial; 103 | right: 0; 104 | } 105 | .slider.slider-horizontal.slider-rtl .slider-tick, 106 | .slider.slider-horizontal.slider-rtl .slider-handle { 107 | margin-left: initial; 108 | margin-right: -10px; 109 | } 110 | .slider.slider-horizontal.slider-rtl .slider-tick-container { 111 | left: initial; 112 | right: 0; 113 | } 114 | .slider.slider-horizontal.slider-rtl .tooltip { 115 | -ms-transform: translateX(50%); 116 | transform: translateX(50%); 117 | } 118 | .slider.slider-vertical { 119 | height: 210px; 120 | width: 20px; 121 | } 122 | .slider.slider-vertical .slider-track { 123 | width: 10px; 124 | height: 100%; 125 | left: 25%; 126 | top: 0; 127 | } 128 | .slider.slider-vertical .slider-selection { 129 | width: 100%; 130 | left: 0; 131 | top: 0; 132 | bottom: 0; 133 | } 134 | .slider.slider-vertical .slider-track-low, 135 | .slider.slider-vertical .slider-track-high { 136 | width: 100%; 137 | left: 0; 138 | right: 0; 139 | } 140 | .slider.slider-vertical .slider-tick, 141 | .slider.slider-vertical .slider-handle { 142 | margin-top: -10px; 143 | } 144 | .slider.slider-vertical .slider-tick.triangle, 145 | .slider.slider-vertical .slider-handle.triangle { 146 | border-width: 10px 0 10px 10px; 147 | width: 1px; 148 | height: 1px; 149 | border-left-color: #2e6da4; 150 | border-right-color: #2e6da4; 151 | margin-left: 0; 152 | margin-right: 0; 153 | } 154 | .slider.slider-vertical .slider-tick-label-container { 155 | white-space: nowrap; 156 | } 157 | .slider.slider-vertical .slider-tick-label-container .slider-tick-label { 158 | padding-left: 4px; 159 | } 160 | .slider.slider-vertical .tooltip { 161 | -ms-transform: translateY(-50%); 162 | transform: translateY(-50%); 163 | } 164 | .slider.slider-vertical.slider-rtl .slider-track { 165 | left: initial; 166 | right: 25%; 167 | } 168 | .slider.slider-vertical.slider-rtl .slider-selection { 169 | left: initial; 170 | right: 0; 171 | } 172 | .slider.slider-vertical.slider-rtl .slider-tick.triangle, 173 | .slider.slider-vertical.slider-rtl .slider-handle.triangle { 174 | border-width: 10px 10px 10px 0; 175 | } 176 | .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { 177 | padding-left: initial; 178 | padding-right: 4px; 179 | } 180 | .slider.slider-disabled .slider-handle { 181 | background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); 182 | background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%); 183 | background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%); 184 | background-repeat: repeat-x; 185 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0); 186 | } 187 | .slider.slider-disabled .slider-track { 188 | background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); 189 | background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%); 190 | background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%); 191 | background-repeat: repeat-x; 192 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0); 193 | cursor: not-allowed; 194 | } 195 | .slider input { 196 | display: none; 197 | } 198 | .slider .tooltip { 199 | pointer-events: none; 200 | } 201 | .slider .tooltip.top { 202 | margin-top: -36px; 203 | } 204 | .slider .tooltip-inner { 205 | white-space: nowrap; 206 | max-width: none; 207 | } 208 | .slider .hide { 209 | display: none; 210 | } 211 | .slider-track { 212 | position: absolute; 213 | cursor: pointer; 214 | background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); 215 | background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%); 216 | background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%); 217 | background-repeat: repeat-x; 218 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); 219 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 220 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 221 | border-radius: 4px; 222 | } 223 | .slider-selection { 224 | position: absolute; 225 | background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 226 | background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 227 | background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); 228 | background-repeat: repeat-x; 229 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); 230 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 231 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 232 | -webkit-box-sizing: border-box; 233 | -moz-box-sizing: border-box; 234 | box-sizing: border-box; 235 | border-radius: 4px; 236 | } 237 | .slider-selection.tick-slider-selection { 238 | background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 239 | background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 240 | background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%); 241 | background-repeat: repeat-x; 242 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0); 243 | } 244 | .slider-track-low, 245 | .slider-track-high { 246 | position: absolute; 247 | background: transparent; 248 | -webkit-box-sizing: border-box; 249 | -moz-box-sizing: border-box; 250 | box-sizing: border-box; 251 | border-radius: 4px; 252 | } 253 | .slider-handle { 254 | position: absolute; 255 | top: 0; 256 | width: 20px; 257 | height: 20px; 258 | background-color: #337ab7; 259 | background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); 260 | background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); 261 | background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); 262 | background-repeat: repeat-x; 263 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); 264 | filter: none; 265 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 266 | box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 267 | border: 0px solid transparent; 268 | } 269 | .slider-handle:hover { 270 | cursor: pointer; 271 | } 272 | .slider-handle.round { 273 | border-radius: 50%; 274 | } 275 | .slider-handle.triangle { 276 | background: transparent none; 277 | } 278 | .slider-handle.custom { 279 | background: transparent none; 280 | } 281 | .slider-handle.custom::before { 282 | line-height: 20px; 283 | font-size: 20px; 284 | content: '\2605'; 285 | color: #726204; 286 | } 287 | .slider-tick { 288 | position: absolute; 289 | cursor: pointer; 290 | width: 20px; 291 | height: 20px; 292 | background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 293 | background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%); 294 | background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); 295 | background-repeat: repeat-x; 296 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); 297 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 298 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 299 | -webkit-box-sizing: border-box; 300 | -moz-box-sizing: border-box; 301 | box-sizing: border-box; 302 | filter: none; 303 | opacity: 0.8; 304 | border: 0px solid transparent; 305 | } 306 | .slider-tick.round { 307 | border-radius: 50%; 308 | } 309 | .slider-tick.triangle { 310 | background: transparent none; 311 | } 312 | .slider-tick.custom { 313 | background: transparent none; 314 | } 315 | .slider-tick.custom::before { 316 | line-height: 20px; 317 | font-size: 20px; 318 | content: '\2605'; 319 | color: #726204; 320 | } 321 | .slider-tick.in-selection { 322 | background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 323 | background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%); 324 | background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%); 325 | background-repeat: repeat-x; 326 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0); 327 | opacity: 1; 328 | } -------------------------------------------------------------------------------- /src/assets/css/bootstrap-slider.min.css: -------------------------------------------------------------------------------- 1 | /*! ======================================================= 2 | VERSION 10.5.0 3 | ========================================================= */ 4 | /*! ========================================================= 5 | * bootstrap-slider.js 6 | * 7 | * Maintainers: 8 | * Kyle Kemp 9 | * - Twitter: @seiyria 10 | * - Github: seiyria 11 | * Rohit Kalkur 12 | * - Twitter: @Rovolutionary 13 | * - Github: rovolution 14 | * 15 | * ========================================================= 16 | * 17 | * bootstrap-slider is released under the MIT License 18 | * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors 19 | * 20 | * Permission is hereby granted, free of charge, to any person 21 | * obtaining a copy of this software and associated documentation 22 | * files (the "Software"), to deal in the Software without 23 | * restriction, including without limitation the rights to use, 24 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 25 | * copies of the Software, and to permit persons to whom the 26 | * Software is furnished to do so, subject to the following 27 | * conditions: 28 | * 29 | * The above copyright notice and this permission notice shall be 30 | * included in all copies or substantial portions of the Software. 31 | * 32 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 33 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 34 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 35 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 36 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 37 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 38 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 39 | * OTHER DEALINGS IN THE SOFTWARE. 40 | * 41 | * ========================================================= */.slider{display:inline-block;vertical-align:middle;position:relative}.slider.slider-horizontal{width:210px;height:20px}.slider.slider-horizontal .slider-track{height:10px;width:100%;margin-top:-5px;top:50%;left:0}.slider.slider-horizontal .slider-selection,.slider.slider-horizontal .slider-track-low,.slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}.slider.slider-horizontal .slider-tick,.slider.slider-horizontal .slider-handle{margin-left:-10px}.slider.slider-horizontal .slider-tick.triangle,.slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#2e6da4;margin-top:0}.slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}.slider.slider-horizontal .slider-tick-label-container{white-space:nowrap;margin-top:20px}.slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}.slider.slider-horizontal .tooltip{-ms-transform:translateX(-50%);transform:translateX(-50%)}.slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}.slider.slider-horizontal.slider-rtl .slider-tick,.slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}.slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}.slider.slider-horizontal.slider-rtl .tooltip{-ms-transform:translateX(50%);transform:translateX(50%)}.slider.slider-vertical{height:210px;width:20px}.slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}.slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}.slider.slider-vertical .slider-track-low,.slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}.slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}.slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#2e6da4;border-right-color:#2e6da4;margin-left:0;margin-right:0}.slider.slider-vertical .slider-tick-label-container{white-space:nowrap}.slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}.slider.slider-vertical .tooltip{-ms-transform:translateY(-50%);transform:translateY(-50%)}.slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}.slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}.slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}.slider.slider-disabled .slider-handle{background-image:-webkit-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:-o-linear-gradient(top,#dfdfdf 0,#bebebe 100%);background-image:linear-gradient(to bottom,#dfdfdf 0,#bebebe 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf',endColorstr='#ffbebebe',GradientType=0)}.slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);cursor:not-allowed}.slider input{display:none}.slider .tooltip{pointer-events:none}.slider .tooltip.top{margin-top:-36px}.slider .tooltip-inner{white-space:nowrap;max-width:none}.slider .hide{display:none}.slider-track{position:absolute;cursor:pointer;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#f9f9f9 100%);background-image:linear-gradient(to bottom,#f5f5f5 0,#f9f9f9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}.slider-selection{position:absolute;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-selection.tick-slider-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0)}.slider-track-low,.slider-track-high{position:absolute;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.slider-handle{position:absolute;top:0;width:20px;height:20px;background-color:#337ab7;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7',endColorstr='#ff2e6da4',GradientType=0);filter:none;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);border:0 solid transparent}.slider-handle:hover{cursor:pointer}.slider-handle.round{border-radius:50%}.slider-handle.triangle{background:transparent none}.slider-handle.custom{background:transparent none}.slider-handle.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick{position:absolute;cursor:pointer;width:20px;height:20px;background-image:-webkit-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#f9f9f9 0,#f5f5f5 100%);background-image:linear-gradient(to bottom,#f9f9f9 0,#f5f5f5 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9',endColorstr='#fff5f5f5',GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;filter:none;opacity:.8;border:0 solid transparent}.slider-tick.round{border-radius:50%}.slider-tick.triangle{background:transparent none}.slider-tick.custom{background:transparent none}.slider-tick.custom::before{line-height:20px;font-size:20px;content:'\2605';color:#726204}.slider-tick.in-selection{background-image:-webkit-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:-o-linear-gradient(top,#8ac1ef 0,#82b3de 100%);background-image:linear-gradient(to bottom,#8ac1ef 0,#82b3de 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef',endColorstr='#ff82b3de',GradientType=0);opacity:1} -------------------------------------------------------------------------------- /src/assets/js/bootstrap-slider.js: -------------------------------------------------------------------------------- 1 | /*! ======================================================= 2 | VERSION 10.5.0 3 | ========================================================= */ 4 | "use strict"; 5 | 6 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 7 | 8 | /*! ========================================================= 9 | * bootstrap-slider.js 10 | * 11 | * Maintainers: 12 | * Kyle Kemp 13 | * - Twitter: @seiyria 14 | * - Github: seiyria 15 | * Rohit Kalkur 16 | * - Twitter: @Rovolutionary 17 | * - Github: rovolution 18 | * 19 | * ========================================================= 20 | * 21 | * bootstrap-slider is released under the MIT License 22 | * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors 23 | * 24 | * Permission is hereby granted, free of charge, to any person 25 | * obtaining a copy of this software and associated documentation 26 | * files (the "Software"), to deal in the Software without 27 | * restriction, including without limitation the rights to use, 28 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 29 | * copies of the Software, and to permit persons to whom the 30 | * Software is furnished to do so, subject to the following 31 | * conditions: 32 | * 33 | * The above copyright notice and this permission notice shall be 34 | * included in all copies or substantial portions of the Software. 35 | * 36 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 37 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 38 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 39 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 40 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 41 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 42 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 43 | * OTHER DEALINGS IN THE SOFTWARE. 44 | * 45 | * ========================================================= */ 46 | 47 | /** 48 | * Bridget makes jQuery widgets 49 | * v1.0.1 50 | * MIT license 51 | */ 52 | var windowIsDefined = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object"; 53 | 54 | (function (factory) { 55 | if (typeof define === "function" && define.amd) { 56 | define(["jquery"], factory); 57 | } else if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === "object" && module.exports) { 58 | var jQuery; 59 | try { 60 | jQuery = require("jquery"); 61 | } catch (err) { 62 | jQuery = null; 63 | } 64 | module.exports = factory(jQuery); 65 | } else if (window) { 66 | window.Slider = factory(window.jQuery); 67 | } 68 | })(function ($) { 69 | // Constants 70 | var NAMESPACE_MAIN = 'slider'; 71 | var NAMESPACE_ALTERNATE = 'bootstrapSlider'; 72 | 73 | // Polyfill console methods 74 | if (windowIsDefined && !window.console) { 75 | window.console = {}; 76 | } 77 | if (windowIsDefined && !window.console.log) { 78 | window.console.log = function () {}; 79 | } 80 | if (windowIsDefined && !window.console.warn) { 81 | window.console.warn = function () {}; 82 | } 83 | 84 | // Reference to Slider constructor 85 | var Slider; 86 | 87 | (function ($) { 88 | 89 | 'use strict'; 90 | 91 | // -------------------------- utils -------------------------- // 92 | 93 | var slice = Array.prototype.slice; 94 | 95 | function noop() {} 96 | 97 | // -------------------------- definition -------------------------- // 98 | 99 | function defineBridget($) { 100 | 101 | // bail if no jQuery 102 | if (!$) { 103 | return; 104 | } 105 | 106 | // -------------------------- addOptionMethod -------------------------- // 107 | 108 | /** 109 | * adds option method -> $().plugin('option', {...}) 110 | * @param {Function} PluginClass - constructor class 111 | */ 112 | function addOptionMethod(PluginClass) { 113 | // don't overwrite original option method 114 | if (PluginClass.prototype.option) { 115 | return; 116 | } 117 | 118 | // option setter 119 | PluginClass.prototype.option = function (opts) { 120 | // bail out if not an object 121 | if (!$.isPlainObject(opts)) { 122 | return; 123 | } 124 | this.options = $.extend(true, this.options, opts); 125 | }; 126 | } 127 | 128 | // -------------------------- plugin bridge -------------------------- // 129 | 130 | // helper function for logging errors 131 | // $.error breaks jQuery chaining 132 | var logError = typeof console === 'undefined' ? noop : function (message) { 133 | console.error(message); 134 | }; 135 | 136 | /** 137 | * jQuery plugin bridge, access methods like $elem.plugin('method') 138 | * @param {String} namespace - plugin name 139 | * @param {Function} PluginClass - constructor class 140 | */ 141 | function bridge(namespace, PluginClass) { 142 | // add to jQuery fn namespace 143 | $.fn[namespace] = function (options) { 144 | if (typeof options === 'string') { 145 | // call plugin method when first argument is a string 146 | // get arguments for method 147 | var args = slice.call(arguments, 1); 148 | 149 | for (var i = 0, len = this.length; i < len; i++) { 150 | var elem = this[i]; 151 | var instance = $.data(elem, namespace); 152 | if (!instance) { 153 | logError("cannot call methods on " + namespace + " prior to initialization; " + "attempted to call '" + options + "'"); 154 | continue; 155 | } 156 | if (!$.isFunction(instance[options]) || options.charAt(0) === '_') { 157 | logError("no such method '" + options + "' for " + namespace + " instance"); 158 | continue; 159 | } 160 | 161 | // trigger method with arguments 162 | var returnValue = instance[options].apply(instance, args); 163 | 164 | // break look and return first value if provided 165 | if (returnValue !== undefined && returnValue !== instance) { 166 | return returnValue; 167 | } 168 | } 169 | // return this if no return value 170 | return this; 171 | } else { 172 | var objects = this.map(function () { 173 | var instance = $.data(this, namespace); 174 | if (instance) { 175 | // apply options & init 176 | instance.option(options); 177 | instance._init(); 178 | } else { 179 | // initialize new instance 180 | instance = new PluginClass(this, options); 181 | $.data(this, namespace, instance); 182 | } 183 | return $(this); 184 | }); 185 | 186 | if (!objects || objects.length > 1) { 187 | return objects; 188 | } else { 189 | return objects[0]; 190 | } 191 | } 192 | }; 193 | } 194 | 195 | // -------------------------- bridget -------------------------- // 196 | 197 | /** 198 | * converts a Prototypical class into a proper jQuery plugin 199 | * the class must have a ._init method 200 | * @param {String} namespace - plugin name, used in $().pluginName 201 | * @param {Function} PluginClass - constructor class 202 | */ 203 | $.bridget = function (namespace, PluginClass) { 204 | addOptionMethod(PluginClass); 205 | bridge(namespace, PluginClass); 206 | }; 207 | 208 | return $.bridget; 209 | } 210 | 211 | // get jquery from browser global 212 | defineBridget($); 213 | })($); 214 | 215 | /************************************************* 216 | BOOTSTRAP-SLIDER SOURCE CODE 217 | **************************************************/ 218 | 219 | (function ($) { 220 | var autoRegisterNamespace = void 0; 221 | 222 | var ErrorMsgs = { 223 | formatInvalidInputErrorMsg: function formatInvalidInputErrorMsg(input) { 224 | return "Invalid input value '" + input + "' passed in"; 225 | }, 226 | callingContextNotSliderInstance: "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method" 227 | }; 228 | 229 | var SliderScale = { 230 | linear: { 231 | getValue: function getValue(value, options) { 232 | if (value < options.min) { 233 | return options.min; 234 | } else if (value > options.max) { 235 | return options.max; 236 | } else { 237 | return value; 238 | } 239 | }, 240 | toValue: function toValue(percentage) { 241 | var rawValue = percentage / 100 * (this.options.max - this.options.min); 242 | var shouldAdjustWithBase = true; 243 | if (this.options.ticks_positions.length > 0) { 244 | var minv, 245 | maxv, 246 | minp, 247 | maxp = 0; 248 | for (var i = 1; i < this.options.ticks_positions.length; i++) { 249 | if (percentage <= this.options.ticks_positions[i]) { 250 | minv = this.options.ticks[i - 1]; 251 | minp = this.options.ticks_positions[i - 1]; 252 | maxv = this.options.ticks[i]; 253 | maxp = this.options.ticks_positions[i]; 254 | 255 | break; 256 | } 257 | } 258 | var partialPercentage = (percentage - minp) / (maxp - minp); 259 | rawValue = minv + partialPercentage * (maxv - minv); 260 | shouldAdjustWithBase = false; 261 | } 262 | 263 | var adjustment = shouldAdjustWithBase ? this.options.min : 0; 264 | var value = adjustment + Math.round(rawValue / this.options.step) * this.options.step; 265 | return SliderScale.linear.getValue(value, this.options); 266 | }, 267 | toPercentage: function toPercentage(value) { 268 | if (this.options.max === this.options.min) { 269 | return 0; 270 | } 271 | 272 | if (this.options.ticks_positions.length > 0) { 273 | var minv, 274 | maxv, 275 | minp, 276 | maxp = 0; 277 | for (var i = 0; i < this.options.ticks.length; i++) { 278 | if (value <= this.options.ticks[i]) { 279 | minv = i > 0 ? this.options.ticks[i - 1] : 0; 280 | minp = i > 0 ? this.options.ticks_positions[i - 1] : 0; 281 | maxv = this.options.ticks[i]; 282 | maxp = this.options.ticks_positions[i]; 283 | 284 | break; 285 | } 286 | } 287 | if (i > 0) { 288 | var partialPercentage = (value - minv) / (maxv - minv); 289 | return minp + partialPercentage * (maxp - minp); 290 | } 291 | } 292 | 293 | return 100 * (value - this.options.min) / (this.options.max - this.options.min); 294 | } 295 | }, 296 | 297 | logarithmic: { 298 | /* Based on http://stackoverflow.com/questions/846221/logarithmic-slider */ 299 | toValue: function toValue(percentage) { 300 | var offset = 1 - this.options.min; 301 | var min = Math.log(this.options.min + offset); 302 | var max = Math.log(this.options.max + offset); 303 | var value = Math.exp(min + (max - min) * percentage / 100) - offset; 304 | if (Math.round(value) === max) { 305 | return max; 306 | } 307 | value = this.options.min + Math.round((value - this.options.min) / this.options.step) * this.options.step; 308 | /* Rounding to the nearest step could exceed the min or 309 | * max, so clip to those values. */ 310 | return SliderScale.linear.getValue(value, this.options); 311 | }, 312 | toPercentage: function toPercentage(value) { 313 | if (this.options.max === this.options.min) { 314 | return 0; 315 | } else { 316 | var offset = 1 - this.options.min; 317 | var max = Math.log(this.options.max + offset); 318 | var min = Math.log(this.options.min + offset); 319 | var v = Math.log(value + offset); 320 | return 100 * (v - min) / (max - min); 321 | } 322 | } 323 | } 324 | }; 325 | 326 | /************************************************* 327 | CONSTRUCTOR 328 | **************************************************/ 329 | Slider = function Slider(element, options) { 330 | createNewSlider.call(this, element, options); 331 | return this; 332 | }; 333 | 334 | function createNewSlider(element, options) { 335 | 336 | /* 337 | The internal state object is used to store data about the current 'state' of slider. 338 | This includes values such as the `value`, `enabled`, etc... 339 | */ 340 | this._state = { 341 | value: null, 342 | enabled: null, 343 | offset: null, 344 | size: null, 345 | percentage: null, 346 | inDrag: false, 347 | over: false, 348 | tickIndex: null 349 | }; 350 | 351 | // The objects used to store the reference to the tick methods if ticks_tooltip is on 352 | this.ticksCallbackMap = {}; 353 | this.handleCallbackMap = {}; 354 | 355 | if (typeof element === "string") { 356 | this.element = document.querySelector(element); 357 | } else if (element instanceof HTMLElement) { 358 | this.element = element; 359 | } 360 | 361 | /************************************************* 362 | Process Options 363 | **************************************************/ 364 | options = options ? options : {}; 365 | var optionTypes = Object.keys(this.defaultOptions); 366 | 367 | var isMinSet = options.hasOwnProperty('min'); 368 | var isMaxSet = options.hasOwnProperty('max'); 369 | 370 | for (var i = 0; i < optionTypes.length; i++) { 371 | var optName = optionTypes[i]; 372 | 373 | // First check if an option was passed in via the constructor 374 | var val = options[optName]; 375 | // If no data attrib, then check data atrributes 376 | val = typeof val !== 'undefined' ? val : getDataAttrib(this.element, optName); 377 | // Finally, if nothing was specified, use the defaults 378 | val = val !== null ? val : this.defaultOptions[optName]; 379 | 380 | // Set all options on the instance of the Slider 381 | if (!this.options) { 382 | this.options = {}; 383 | } 384 | this.options[optName] = val; 385 | } 386 | 387 | this.ticksAreValid = Array.isArray(this.options.ticks) && this.options.ticks.length > 0; 388 | 389 | // Lock to ticks only when ticks[] is defined and set 390 | if (!this.ticksAreValid) { 391 | this.options.lock_to_ticks = false; 392 | } 393 | 394 | // Check options.rtl 395 | if (this.options.rtl === 'auto') { 396 | var computedStyle = window.getComputedStyle(this.element); 397 | if (computedStyle != null) { 398 | this.options.rtl = computedStyle.direction === 'rtl'; 399 | } else { 400 | // Fix for Firefox bug in versions less than 62: 401 | // https://bugzilla.mozilla.org/show_bug.cgi?id=548397 402 | // https://bugzilla.mozilla.org/show_bug.cgi?id=1467722 403 | this.options.rtl = this.element.style.direction === 'rtl'; 404 | } 405 | } 406 | 407 | /* 408 | Validate `tooltip_position` against 'orientation` 409 | - if `tooltip_position` is incompatible with orientation, swith it to a default compatible with specified `orientation` 410 | -- default for "vertical" -> "right", "left" if rtl 411 | -- default for "horizontal" -> "top" 412 | */ 413 | if (this.options.orientation === "vertical" && (this.options.tooltip_position === "top" || this.options.tooltip_position === "bottom")) { 414 | if (this.options.rtl) { 415 | this.options.tooltip_position = "left"; 416 | } else { 417 | this.options.tooltip_position = "right"; 418 | } 419 | } else if (this.options.orientation === "horizontal" && (this.options.tooltip_position === "left" || this.options.tooltip_position === "right")) { 420 | 421 | this.options.tooltip_position = "top"; 422 | } 423 | 424 | function getDataAttrib(element, optName) { 425 | var dataName = "data-slider-" + optName.replace(/_/g, '-'); 426 | var dataValString = element.getAttribute(dataName); 427 | 428 | try { 429 | return JSON.parse(dataValString); 430 | } catch (err) { 431 | return dataValString; 432 | } 433 | } 434 | 435 | /************************************************* 436 | Create Markup 437 | **************************************************/ 438 | 439 | var origWidth = this.element.style.width; 440 | var updateSlider = false; 441 | var parent = this.element.parentNode; 442 | var sliderTrackSelection; 443 | var sliderTrackLow, sliderTrackHigh; 444 | var sliderMinHandle; 445 | var sliderMaxHandle; 446 | 447 | if (this.sliderElem) { 448 | updateSlider = true; 449 | } else { 450 | /* Create elements needed for slider */ 451 | this.sliderElem = document.createElement("div"); 452 | this.sliderElem.className = "slider"; 453 | 454 | /* Create slider track elements */ 455 | var sliderTrack = document.createElement("div"); 456 | sliderTrack.className = "slider-track"; 457 | 458 | sliderTrackLow = document.createElement("div"); 459 | sliderTrackLow.className = "slider-track-low"; 460 | 461 | sliderTrackSelection = document.createElement("div"); 462 | sliderTrackSelection.className = "slider-selection"; 463 | 464 | sliderTrackHigh = document.createElement("div"); 465 | sliderTrackHigh.className = "slider-track-high"; 466 | 467 | sliderMinHandle = document.createElement("div"); 468 | sliderMinHandle.className = "slider-handle min-slider-handle"; 469 | sliderMinHandle.setAttribute('role', 'slider'); 470 | sliderMinHandle.setAttribute('aria-valuemin', this.options.min); 471 | sliderMinHandle.setAttribute('aria-valuemax', this.options.max); 472 | 473 | sliderMaxHandle = document.createElement("div"); 474 | sliderMaxHandle.className = "slider-handle max-slider-handle"; 475 | sliderMaxHandle.setAttribute('role', 'slider'); 476 | sliderMaxHandle.setAttribute('aria-valuemin', this.options.min); 477 | sliderMaxHandle.setAttribute('aria-valuemax', this.options.max); 478 | 479 | sliderTrack.appendChild(sliderTrackLow); 480 | sliderTrack.appendChild(sliderTrackSelection); 481 | sliderTrack.appendChild(sliderTrackHigh); 482 | 483 | /* Create highlight range elements */ 484 | this.rangeHighlightElements = []; 485 | var rangeHighlightsOpts = this.options.rangeHighlights; 486 | if (Array.isArray(rangeHighlightsOpts) && rangeHighlightsOpts.length > 0) { 487 | for (var j = 0; j < rangeHighlightsOpts.length; j++) { 488 | var rangeHighlightElement = document.createElement("div"); 489 | var customClassString = rangeHighlightsOpts[j].class || ""; 490 | rangeHighlightElement.className = "slider-rangeHighlight slider-selection " + customClassString; 491 | this.rangeHighlightElements.push(rangeHighlightElement); 492 | sliderTrack.appendChild(rangeHighlightElement); 493 | } 494 | } 495 | 496 | /* Add aria-labelledby to handle's */ 497 | var isLabelledbyArray = Array.isArray(this.options.labelledby); 498 | if (isLabelledbyArray && this.options.labelledby[0]) { 499 | sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby[0]); 500 | } 501 | if (isLabelledbyArray && this.options.labelledby[1]) { 502 | sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby[1]); 503 | } 504 | if (!isLabelledbyArray && this.options.labelledby) { 505 | sliderMinHandle.setAttribute('aria-labelledby', this.options.labelledby); 506 | sliderMaxHandle.setAttribute('aria-labelledby', this.options.labelledby); 507 | } 508 | 509 | /* Create ticks */ 510 | this.ticks = []; 511 | if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { 512 | this.ticksContainer = document.createElement('div'); 513 | this.ticksContainer.className = 'slider-tick-container'; 514 | 515 | for (i = 0; i < this.options.ticks.length; i++) { 516 | var tick = document.createElement('div'); 517 | tick.className = 'slider-tick'; 518 | if (this.options.ticks_tooltip) { 519 | var tickListenerReference = this._addTickListener(); 520 | var enterCallback = tickListenerReference.addMouseEnter(this, tick, i); 521 | var leaveCallback = tickListenerReference.addMouseLeave(this, tick); 522 | 523 | this.ticksCallbackMap[i] = { 524 | mouseEnter: enterCallback, 525 | mouseLeave: leaveCallback 526 | }; 527 | } 528 | this.ticks.push(tick); 529 | this.ticksContainer.appendChild(tick); 530 | } 531 | 532 | sliderTrackSelection.className += " tick-slider-selection"; 533 | } 534 | 535 | this.tickLabels = []; 536 | if (Array.isArray(this.options.ticks_labels) && this.options.ticks_labels.length > 0) { 537 | this.tickLabelContainer = document.createElement('div'); 538 | this.tickLabelContainer.className = 'slider-tick-label-container'; 539 | 540 | for (i = 0; i < this.options.ticks_labels.length; i++) { 541 | var label = document.createElement('div'); 542 | var noTickPositionsSpecified = this.options.ticks_positions.length === 0; 543 | var tickLabelsIndex = this.options.reversed && noTickPositionsSpecified ? this.options.ticks_labels.length - (i + 1) : i; 544 | label.className = 'slider-tick-label'; 545 | label.innerHTML = this.options.ticks_labels[tickLabelsIndex]; 546 | 547 | this.tickLabels.push(label); 548 | this.tickLabelContainer.appendChild(label); 549 | } 550 | } 551 | 552 | var createAndAppendTooltipSubElements = function createAndAppendTooltipSubElements(tooltipElem) { 553 | var arrow = document.createElement("div"); 554 | arrow.className = "tooltip-arrow"; 555 | 556 | var inner = document.createElement("div"); 557 | inner.className = "tooltip-inner"; 558 | 559 | tooltipElem.appendChild(arrow); 560 | tooltipElem.appendChild(inner); 561 | }; 562 | 563 | /* Create tooltip elements */ 564 | var sliderTooltip = document.createElement("div"); 565 | sliderTooltip.className = "tooltip tooltip-main"; 566 | sliderTooltip.setAttribute('role', 'presentation'); 567 | createAndAppendTooltipSubElements(sliderTooltip); 568 | 569 | var sliderTooltipMin = document.createElement("div"); 570 | sliderTooltipMin.className = "tooltip tooltip-min"; 571 | sliderTooltipMin.setAttribute('role', 'presentation'); 572 | createAndAppendTooltipSubElements(sliderTooltipMin); 573 | 574 | var sliderTooltipMax = document.createElement("div"); 575 | sliderTooltipMax.className = "tooltip tooltip-max"; 576 | sliderTooltipMax.setAttribute('role', 'presentation'); 577 | createAndAppendTooltipSubElements(sliderTooltipMax); 578 | 579 | /* Append components to sliderElem */ 580 | this.sliderElem.appendChild(sliderTrack); 581 | this.sliderElem.appendChild(sliderTooltip); 582 | this.sliderElem.appendChild(sliderTooltipMin); 583 | this.sliderElem.appendChild(sliderTooltipMax); 584 | 585 | if (this.tickLabelContainer) { 586 | this.sliderElem.appendChild(this.tickLabelContainer); 587 | } 588 | if (this.ticksContainer) { 589 | this.sliderElem.appendChild(this.ticksContainer); 590 | } 591 | 592 | this.sliderElem.appendChild(sliderMinHandle); 593 | this.sliderElem.appendChild(sliderMaxHandle); 594 | 595 | /* Append slider element to parent container, right before the original element */ 596 | parent.insertBefore(this.sliderElem, this.element); 597 | 598 | /* Hide original element */ 599 | this.element.style.display = "none"; 600 | } 601 | /* If JQuery exists, cache JQ references */ 602 | if ($) { 603 | this.$element = $(this.element); 604 | this.$sliderElem = $(this.sliderElem); 605 | } 606 | 607 | /************************************************* 608 | Setup 609 | **************************************************/ 610 | this.eventToCallbackMap = {}; 611 | this.sliderElem.id = this.options.id; 612 | 613 | this.touchCapable = 'ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch; 614 | 615 | this.touchX = 0; 616 | this.touchY = 0; 617 | 618 | this.tooltip = this.sliderElem.querySelector('.tooltip-main'); 619 | this.tooltipInner = this.tooltip.querySelector('.tooltip-inner'); 620 | 621 | this.tooltip_min = this.sliderElem.querySelector('.tooltip-min'); 622 | this.tooltipInner_min = this.tooltip_min.querySelector('.tooltip-inner'); 623 | 624 | this.tooltip_max = this.sliderElem.querySelector('.tooltip-max'); 625 | this.tooltipInner_max = this.tooltip_max.querySelector('.tooltip-inner'); 626 | 627 | if (SliderScale[this.options.scale]) { 628 | this.options.scale = SliderScale[this.options.scale]; 629 | } 630 | 631 | if (updateSlider === true) { 632 | // Reset classes 633 | this._removeClass(this.sliderElem, 'slider-horizontal'); 634 | this._removeClass(this.sliderElem, 'slider-vertical'); 635 | this._removeClass(this.sliderElem, 'slider-rtl'); 636 | this._removeClass(this.tooltip, 'hide'); 637 | this._removeClass(this.tooltip_min, 'hide'); 638 | this._removeClass(this.tooltip_max, 'hide'); 639 | 640 | // Undo existing inline styles for track 641 | ["left", "right", "top", "width", "height"].forEach(function (prop) { 642 | this._removeProperty(this.trackLow, prop); 643 | this._removeProperty(this.trackSelection, prop); 644 | this._removeProperty(this.trackHigh, prop); 645 | }, this); 646 | 647 | // Undo inline styles on handles 648 | [this.handle1, this.handle2].forEach(function (handle) { 649 | this._removeProperty(handle, 'left'); 650 | this._removeProperty(handle, 'right'); 651 | this._removeProperty(handle, 'top'); 652 | }, this); 653 | 654 | // Undo inline styles and classes on tooltips 655 | [this.tooltip, this.tooltip_min, this.tooltip_max].forEach(function (tooltip) { 656 | this._removeProperty(tooltip, 'left'); 657 | this._removeProperty(tooltip, 'right'); 658 | this._removeProperty(tooltip, 'top'); 659 | 660 | this._removeClass(tooltip, 'right'); 661 | this._removeClass(tooltip, 'left'); 662 | this._removeClass(tooltip, 'top'); 663 | }, this); 664 | } 665 | 666 | if (this.options.orientation === 'vertical') { 667 | this._addClass(this.sliderElem, 'slider-vertical'); 668 | this.stylePos = 'top'; 669 | this.mousePos = 'pageY'; 670 | this.sizePos = 'offsetHeight'; 671 | } else { 672 | this._addClass(this.sliderElem, 'slider-horizontal'); 673 | this.sliderElem.style.width = origWidth; 674 | this.options.orientation = 'horizontal'; 675 | if (this.options.rtl) { 676 | this.stylePos = 'right'; 677 | } else { 678 | this.stylePos = 'left'; 679 | } 680 | this.mousePos = 'clientX'; 681 | this.sizePos = 'offsetWidth'; 682 | } 683 | // specific rtl class 684 | if (this.options.rtl) { 685 | this._addClass(this.sliderElem, 'slider-rtl'); 686 | } 687 | this._setTooltipPosition(); 688 | /* In case ticks are specified, overwrite the min and max bounds */ 689 | if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { 690 | if (!isMaxSet) { 691 | this.options.max = Math.max.apply(Math, this.options.ticks); 692 | } 693 | if (!isMinSet) { 694 | this.options.min = Math.min.apply(Math, this.options.ticks); 695 | } 696 | } 697 | 698 | if (Array.isArray(this.options.value)) { 699 | this.options.range = true; 700 | this._state.value = this.options.value; 701 | } else if (this.options.range) { 702 | // User wants a range, but value is not an array 703 | this._state.value = [this.options.value, this.options.max]; 704 | } else { 705 | this._state.value = this.options.value; 706 | } 707 | 708 | this.trackLow = sliderTrackLow || this.trackLow; 709 | this.trackSelection = sliderTrackSelection || this.trackSelection; 710 | this.trackHigh = sliderTrackHigh || this.trackHigh; 711 | 712 | if (this.options.selection === 'none') { 713 | this._addClass(this.trackLow, 'hide'); 714 | this._addClass(this.trackSelection, 'hide'); 715 | this._addClass(this.trackHigh, 'hide'); 716 | } else if (this.options.selection === 'after' || this.options.selection === 'before') { 717 | this._removeClass(this.trackLow, 'hide'); 718 | this._removeClass(this.trackSelection, 'hide'); 719 | this._removeClass(this.trackHigh, 'hide'); 720 | } 721 | 722 | this.handle1 = sliderMinHandle || this.handle1; 723 | this.handle2 = sliderMaxHandle || this.handle2; 724 | 725 | if (updateSlider === true) { 726 | // Reset classes 727 | this._removeClass(this.handle1, 'round triangle'); 728 | this._removeClass(this.handle2, 'round triangle hide'); 729 | 730 | for (i = 0; i < this.ticks.length; i++) { 731 | this._removeClass(this.ticks[i], 'round triangle hide'); 732 | } 733 | } 734 | 735 | var availableHandleModifiers = ['round', 'triangle', 'custom']; 736 | var isValidHandleType = availableHandleModifiers.indexOf(this.options.handle) !== -1; 737 | if (isValidHandleType) { 738 | this._addClass(this.handle1, this.options.handle); 739 | this._addClass(this.handle2, this.options.handle); 740 | 741 | for (i = 0; i < this.ticks.length; i++) { 742 | this._addClass(this.ticks[i], this.options.handle); 743 | } 744 | } 745 | 746 | this._state.offset = this._offset(this.sliderElem); 747 | this._state.size = this.sliderElem[this.sizePos]; 748 | this.setValue(this._state.value); 749 | 750 | /****************************************** 751 | Bind Event Listeners 752 | ******************************************/ 753 | 754 | // Bind keyboard handlers 755 | this.handle1Keydown = this._keydown.bind(this, 0); 756 | this.handle1.addEventListener("keydown", this.handle1Keydown, false); 757 | 758 | this.handle2Keydown = this._keydown.bind(this, 1); 759 | this.handle2.addEventListener("keydown", this.handle2Keydown, false); 760 | 761 | this.mousedown = this._mousedown.bind(this); 762 | this.touchstart = this._touchstart.bind(this); 763 | this.touchmove = this._touchmove.bind(this); 764 | 765 | if (this.touchCapable) { 766 | // Test for passive event support 767 | var supportsPassive = false; 768 | try { 769 | var opts = Object.defineProperty({}, 'passive', { 770 | get: function get() { 771 | supportsPassive = true; 772 | } 773 | }); 774 | window.addEventListener("test", null, opts); 775 | } catch (e) {} 776 | // Use our detect's results. passive applied if supported, capture will be false either way. 777 | var eventOptions = supportsPassive ? { passive: true } : false; 778 | // Bind touch handlers 779 | this.sliderElem.addEventListener("touchstart", this.touchstart, eventOptions); 780 | this.sliderElem.addEventListener("touchmove", this.touchmove, eventOptions); 781 | } 782 | this.sliderElem.addEventListener("mousedown", this.mousedown, false); 783 | 784 | // Bind window handlers 785 | this.resize = this._resize.bind(this); 786 | window.addEventListener("resize", this.resize, false); 787 | 788 | // Bind tooltip-related handlers 789 | if (this.options.tooltip === 'hide') { 790 | this._addClass(this.tooltip, 'hide'); 791 | this._addClass(this.tooltip_min, 'hide'); 792 | this._addClass(this.tooltip_max, 'hide'); 793 | } else if (this.options.tooltip === 'always') { 794 | this._showTooltip(); 795 | this._alwaysShowTooltip = true; 796 | } else { 797 | this.showTooltip = this._showTooltip.bind(this); 798 | this.hideTooltip = this._hideTooltip.bind(this); 799 | 800 | if (this.options.ticks_tooltip) { 801 | var callbackHandle = this._addTickListener(); 802 | //create handle1 listeners and store references in map 803 | var mouseEnter = callbackHandle.addMouseEnter(this, this.handle1); 804 | var mouseLeave = callbackHandle.addMouseLeave(this, this.handle1); 805 | this.handleCallbackMap.handle1 = { 806 | mouseEnter: mouseEnter, 807 | mouseLeave: mouseLeave 808 | }; 809 | //create handle2 listeners and store references in map 810 | mouseEnter = callbackHandle.addMouseEnter(this, this.handle2); 811 | mouseLeave = callbackHandle.addMouseLeave(this, this.handle2); 812 | this.handleCallbackMap.handle2 = { 813 | mouseEnter: mouseEnter, 814 | mouseLeave: mouseLeave 815 | }; 816 | } else { 817 | this.sliderElem.addEventListener("mouseenter", this.showTooltip, false); 818 | this.sliderElem.addEventListener("mouseleave", this.hideTooltip, false); 819 | } 820 | 821 | this.handle1.addEventListener("focus", this.showTooltip, false); 822 | this.handle1.addEventListener("blur", this.hideTooltip, false); 823 | 824 | this.handle2.addEventListener("focus", this.showTooltip, false); 825 | this.handle2.addEventListener("blur", this.hideTooltip, false); 826 | } 827 | 828 | if (this.options.enabled) { 829 | this.enable(); 830 | } else { 831 | this.disable(); 832 | } 833 | } 834 | 835 | /************************************************* 836 | INSTANCE PROPERTIES/METHODS 837 | - Any methods bound to the prototype are considered 838 | part of the plugin's `public` interface 839 | **************************************************/ 840 | Slider.prototype = { 841 | _init: function _init() {}, // NOTE: Must exist to support bridget 842 | 843 | constructor: Slider, 844 | 845 | defaultOptions: { 846 | id: "", 847 | min: 0, 848 | max: 10, 849 | step: 1, 850 | precision: 0, 851 | orientation: 'horizontal', 852 | value: 0, 853 | range: false, 854 | selection: 'before', 855 | tooltip: 'show', 856 | tooltip_split: false, 857 | lock_to_ticks: false, 858 | handle: 'round', 859 | reversed: false, 860 | rtl: 'auto', 861 | enabled: true, 862 | formatter: function formatter(val) { 863 | if (Array.isArray(val)) { 864 | return val[0] + " : " + val[1]; 865 | } else { 866 | return val; 867 | } 868 | }, 869 | natural_arrow_keys: false, 870 | ticks: [], 871 | ticks_positions: [], 872 | ticks_labels: [], 873 | ticks_snap_bounds: 0, 874 | ticks_tooltip: false, 875 | scale: 'linear', 876 | focus: false, 877 | tooltip_position: null, 878 | labelledby: null, 879 | rangeHighlights: [] 880 | }, 881 | 882 | getElement: function getElement() { 883 | return this.sliderElem; 884 | }, 885 | 886 | getValue: function getValue() { 887 | if (this.options.range) { 888 | return this._state.value; 889 | } else { 890 | return this._state.value[0]; 891 | } 892 | }, 893 | 894 | setValue: function setValue(val, triggerSlideEvent, triggerChangeEvent) { 895 | if (!val) { 896 | val = 0; 897 | } 898 | var oldValue = this.getValue(); 899 | this._state.value = this._validateInputValue(val); 900 | var applyPrecision = this._applyPrecision.bind(this); 901 | 902 | if (this.options.range) { 903 | this._state.value[0] = applyPrecision(this._state.value[0]); 904 | this._state.value[1] = applyPrecision(this._state.value[1]); 905 | 906 | if (this.ticksAreValid && this.options.lock_to_ticks) { 907 | this._state.value[0] = this.options.ticks[this._getClosestTickIndex(this._state.value[0])]; 908 | this._state.value[1] = this.options.ticks[this._getClosestTickIndex(this._state.value[1])]; 909 | } 910 | 911 | this._state.value[0] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[0])); 912 | this._state.value[1] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[1])); 913 | } else { 914 | this._state.value = applyPrecision(this._state.value); 915 | 916 | if (this.ticksAreValid && this.options.lock_to_ticks) { 917 | this._state.value = this.options.ticks[this._getClosestTickIndex(this._state.value)]; 918 | } 919 | 920 | this._state.value = [Math.max(this.options.min, Math.min(this.options.max, this._state.value))]; 921 | this._addClass(this.handle2, 'hide'); 922 | if (this.options.selection === 'after') { 923 | this._state.value[1] = this.options.max; 924 | } else { 925 | this._state.value[1] = this.options.min; 926 | } 927 | } 928 | 929 | // Determine which ticks the handle(s) are set at (if applicable) 930 | this._setTickIndex(); 931 | 932 | if (this.options.max > this.options.min) { 933 | this._state.percentage = [this._toPercentage(this._state.value[0]), this._toPercentage(this._state.value[1]), this.options.step * 100 / (this.options.max - this.options.min)]; 934 | } else { 935 | this._state.percentage = [0, 0, 100]; 936 | } 937 | 938 | this._layout(); 939 | var newValue = this.options.range ? this._state.value : this._state.value[0]; 940 | 941 | this._setDataVal(newValue); 942 | if (triggerSlideEvent === true) { 943 | this._trigger('slide', newValue); 944 | } 945 | 946 | var hasChanged = false; 947 | if (Array.isArray(newValue)) { 948 | hasChanged = oldValue[0] !== newValue[0] || oldValue[1] !== newValue[1]; 949 | } else { 950 | hasChanged = oldValue !== newValue; 951 | } 952 | 953 | if (hasChanged && triggerChangeEvent === true) { 954 | this._trigger('change', { 955 | oldValue: oldValue, 956 | newValue: newValue 957 | }); 958 | } 959 | 960 | return this; 961 | }, 962 | 963 | destroy: function destroy() { 964 | // Remove event handlers on slider elements 965 | this._removeSliderEventHandlers(); 966 | 967 | // Remove the slider from the DOM 968 | this.sliderElem.parentNode.removeChild(this.sliderElem); 969 | /* Show original element */ 970 | this.element.style.display = ""; 971 | 972 | // Clear out custom event bindings 973 | this._cleanUpEventCallbacksMap(); 974 | 975 | // Remove data values 976 | this.element.removeAttribute("data"); 977 | 978 | // Remove JQuery handlers/data 979 | if ($) { 980 | this._unbindJQueryEventHandlers(); 981 | if (autoRegisterNamespace === NAMESPACE_MAIN) { 982 | this.$element.removeData(autoRegisterNamespace); 983 | } 984 | this.$element.removeData(NAMESPACE_ALTERNATE); 985 | } 986 | }, 987 | 988 | disable: function disable() { 989 | this._state.enabled = false; 990 | this.handle1.removeAttribute("tabindex"); 991 | this.handle2.removeAttribute("tabindex"); 992 | this._addClass(this.sliderElem, 'slider-disabled'); 993 | this._trigger('slideDisabled'); 994 | 995 | return this; 996 | }, 997 | 998 | enable: function enable() { 999 | this._state.enabled = true; 1000 | this.handle1.setAttribute("tabindex", 0); 1001 | this.handle2.setAttribute("tabindex", 0); 1002 | this._removeClass(this.sliderElem, 'slider-disabled'); 1003 | this._trigger('slideEnabled'); 1004 | 1005 | return this; 1006 | }, 1007 | 1008 | toggle: function toggle() { 1009 | if (this._state.enabled) { 1010 | this.disable(); 1011 | } else { 1012 | this.enable(); 1013 | } 1014 | return this; 1015 | }, 1016 | 1017 | isEnabled: function isEnabled() { 1018 | return this._state.enabled; 1019 | }, 1020 | 1021 | on: function on(evt, callback) { 1022 | this._bindNonQueryEventHandler(evt, callback); 1023 | return this; 1024 | }, 1025 | 1026 | off: function off(evt, callback) { 1027 | if ($) { 1028 | this.$element.off(evt, callback); 1029 | this.$sliderElem.off(evt, callback); 1030 | } else { 1031 | this._unbindNonQueryEventHandler(evt, callback); 1032 | } 1033 | }, 1034 | 1035 | getAttribute: function getAttribute(attribute) { 1036 | if (attribute) { 1037 | return this.options[attribute]; 1038 | } else { 1039 | return this.options; 1040 | } 1041 | }, 1042 | 1043 | setAttribute: function setAttribute(attribute, value) { 1044 | this.options[attribute] = value; 1045 | return this; 1046 | }, 1047 | 1048 | refresh: function refresh() { 1049 | this._removeSliderEventHandlers(); 1050 | createNewSlider.call(this, this.element, this.options); 1051 | if ($) { 1052 | // Bind new instance of slider to the element 1053 | if (autoRegisterNamespace === NAMESPACE_MAIN) { 1054 | $.data(this.element, NAMESPACE_MAIN, this); 1055 | $.data(this.element, NAMESPACE_ALTERNATE, this); 1056 | } else { 1057 | $.data(this.element, NAMESPACE_ALTERNATE, this); 1058 | } 1059 | } 1060 | return this; 1061 | }, 1062 | 1063 | relayout: function relayout() { 1064 | this._resize(); 1065 | return this; 1066 | }, 1067 | 1068 | /******************************+ 1069 | HELPERS 1070 | - Any method that is not part of the public interface. 1071 | - Place it underneath this comment block and write its signature like so: 1072 | _fnName : function() {...} 1073 | ********************************/ 1074 | _removeTooltipListener: function _removeTooltipListener(event) { 1075 | this.handle1.removeEventListener(event, this.showTooltip, false); 1076 | this.handle2.removeEventListener(event, this.showTooltip, false); 1077 | }, 1078 | _removeSliderEventHandlers: function _removeSliderEventHandlers() { 1079 | // Remove keydown event listeners 1080 | this.handle1.removeEventListener("keydown", this.handle1Keydown, false); 1081 | this.handle2.removeEventListener("keydown", this.handle2Keydown, false); 1082 | 1083 | //remove the listeners from the ticks and handles if they had their own listeners 1084 | if (this.options.ticks_tooltip) { 1085 | var ticks = this.ticksContainer.getElementsByClassName('slider-tick'); 1086 | for (var i = 0; i < ticks.length; i++) { 1087 | ticks[i].removeEventListener('mouseenter', this.ticksCallbackMap[i].mouseEnter, false); 1088 | ticks[i].removeEventListener('mouseleave', this.ticksCallbackMap[i].mouseLeave, false); 1089 | } 1090 | if (this.handleCallbackMap.handle1 && this.handleCallbackMap.handle2) { 1091 | this.handle1.removeEventListener('mouseenter', this.handleCallbackMap.handle1.mouseEnter, false); 1092 | this.handle2.removeEventListener('mouseenter', this.handleCallbackMap.handle2.mouseEnter, false); 1093 | this.handle1.removeEventListener('mouseleave', this.handleCallbackMap.handle1.mouseLeave, false); 1094 | this.handle2.removeEventListener('mouseleave', this.handleCallbackMap.handle2.mouseLeave, false); 1095 | } 1096 | } 1097 | 1098 | this.handleCallbackMap = null; 1099 | this.ticksCallbackMap = null; 1100 | 1101 | if (this.showTooltip) { 1102 | this._removeTooltipListener("focus"); 1103 | } 1104 | if (this.hideTooltip) { 1105 | this._removeTooltipListener("blur"); 1106 | } 1107 | 1108 | // Remove event listeners from sliderElem 1109 | if (this.showTooltip) { 1110 | this.sliderElem.removeEventListener("mouseenter", this.showTooltip, false); 1111 | } 1112 | if (this.hideTooltip) { 1113 | this.sliderElem.removeEventListener("mouseleave", this.hideTooltip, false); 1114 | } 1115 | this.sliderElem.removeEventListener("touchstart", this.touchstart, false); 1116 | this.sliderElem.removeEventListener("touchmove", this.touchmove, false); 1117 | this.sliderElem.removeEventListener("mousedown", this.mousedown, false); 1118 | 1119 | // Remove window event listener 1120 | window.removeEventListener("resize", this.resize, false); 1121 | }, 1122 | _bindNonQueryEventHandler: function _bindNonQueryEventHandler(evt, callback) { 1123 | if (this.eventToCallbackMap[evt] === undefined) { 1124 | this.eventToCallbackMap[evt] = []; 1125 | } 1126 | this.eventToCallbackMap[evt].push(callback); 1127 | }, 1128 | _unbindNonQueryEventHandler: function _unbindNonQueryEventHandler(evt, callback) { 1129 | var callbacks = this.eventToCallbackMap[evt]; 1130 | if (callbacks !== undefined) { 1131 | for (var i = 0; i < callbacks.length; i++) { 1132 | if (callbacks[i] === callback) { 1133 | callbacks.splice(i, 1); 1134 | break; 1135 | } 1136 | } 1137 | } 1138 | }, 1139 | _cleanUpEventCallbacksMap: function _cleanUpEventCallbacksMap() { 1140 | var eventNames = Object.keys(this.eventToCallbackMap); 1141 | for (var i = 0; i < eventNames.length; i++) { 1142 | var eventName = eventNames[i]; 1143 | delete this.eventToCallbackMap[eventName]; 1144 | } 1145 | }, 1146 | _showTooltip: function _showTooltip() { 1147 | if (this.options.tooltip_split === false) { 1148 | this._addClass(this.tooltip, 'in'); 1149 | this.tooltip_min.style.display = 'none'; 1150 | this.tooltip_max.style.display = 'none'; 1151 | } else { 1152 | this._addClass(this.tooltip_min, 'in'); 1153 | this._addClass(this.tooltip_max, 'in'); 1154 | this.tooltip.style.display = 'none'; 1155 | } 1156 | this._state.over = true; 1157 | }, 1158 | _hideTooltip: function _hideTooltip() { 1159 | if (this._state.inDrag === false && this._alwaysShowTooltip !== true) { 1160 | this._removeClass(this.tooltip, 'in'); 1161 | this._removeClass(this.tooltip_min, 'in'); 1162 | this._removeClass(this.tooltip_max, 'in'); 1163 | } 1164 | this._state.over = false; 1165 | }, 1166 | _setToolTipOnMouseOver: function _setToolTipOnMouseOver(tempState) { 1167 | var self = this; 1168 | var formattedTooltipVal = this.options.formatter(!tempState ? this._state.value[0] : tempState.value[0]); 1169 | var positionPercentages = !tempState ? getPositionPercentages(this._state, this.options.reversed) : getPositionPercentages(tempState, this.options.reversed); 1170 | this._setText(this.tooltipInner, formattedTooltipVal); 1171 | 1172 | this.tooltip.style[this.stylePos] = positionPercentages[0] + "%"; 1173 | 1174 | function getPositionPercentages(state, reversed) { 1175 | if (reversed) { 1176 | return [100 - state.percentage[0], self.options.range ? 100 - state.percentage[1] : state.percentage[1]]; 1177 | } 1178 | return [state.percentage[0], state.percentage[1]]; 1179 | } 1180 | }, 1181 | _copyState: function _copyState() { 1182 | return { 1183 | value: [this._state.value[0], this._state.value[1]], 1184 | enabled: this._state.enabled, 1185 | offset: this._state.offset, 1186 | size: this._state.size, 1187 | percentage: [this._state.percentage[0], this._state.percentage[1], this._state.percentage[2]], 1188 | inDrag: this._state.inDrag, 1189 | over: this._state.over, 1190 | // deleted or null'd keys 1191 | dragged: this._state.dragged, 1192 | keyCtrl: this._state.keyCtrl 1193 | }; 1194 | }, 1195 | _addTickListener: function _addTickListener() { 1196 | return { 1197 | addMouseEnter: function addMouseEnter(reference, element, index) { 1198 | var enter = function enter() { 1199 | var tempState = reference._copyState(); 1200 | // Which handle is being hovered over? 1201 | var val = element === reference.handle1 ? tempState.value[0] : tempState.value[1]; 1202 | var per = void 0; 1203 | 1204 | // Setup value and percentage for tick's 'mouseenter' 1205 | if (index !== undefined) { 1206 | val = reference.options.ticks[index]; 1207 | per = reference.options.ticks_positions.length > 0 && reference.options.ticks_positions[index] || reference._toPercentage(reference.options.ticks[index]); 1208 | } else { 1209 | per = reference._toPercentage(val); 1210 | } 1211 | 1212 | tempState.value[0] = val; 1213 | tempState.percentage[0] = per; 1214 | reference._setToolTipOnMouseOver(tempState); 1215 | reference._showTooltip(); 1216 | }; 1217 | element.addEventListener("mouseenter", enter, false); 1218 | return enter; 1219 | }, 1220 | addMouseLeave: function addMouseLeave(reference, element) { 1221 | var leave = function leave() { 1222 | reference._hideTooltip(); 1223 | }; 1224 | element.addEventListener("mouseleave", leave, false); 1225 | return leave; 1226 | } 1227 | }; 1228 | }, 1229 | _layout: function _layout() { 1230 | var positionPercentages; 1231 | var formattedValue; 1232 | 1233 | if (this.options.reversed) { 1234 | positionPercentages = [100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]]; 1235 | } else { 1236 | positionPercentages = [this._state.percentage[0], this._state.percentage[1]]; 1237 | } 1238 | 1239 | this.handle1.style[this.stylePos] = positionPercentages[0] + "%"; 1240 | this.handle1.setAttribute('aria-valuenow', this._state.value[0]); 1241 | formattedValue = this.options.formatter(this._state.value[0]); 1242 | if (isNaN(formattedValue)) { 1243 | this.handle1.setAttribute('aria-valuetext', formattedValue); 1244 | } else { 1245 | this.handle1.removeAttribute('aria-valuetext'); 1246 | } 1247 | 1248 | this.handle2.style[this.stylePos] = positionPercentages[1] + "%"; 1249 | this.handle2.setAttribute('aria-valuenow', this._state.value[1]); 1250 | formattedValue = this.options.formatter(this._state.value[1]); 1251 | if (isNaN(formattedValue)) { 1252 | this.handle2.setAttribute('aria-valuetext', formattedValue); 1253 | } else { 1254 | this.handle2.removeAttribute('aria-valuetext'); 1255 | } 1256 | 1257 | /* Position highlight range elements */ 1258 | if (this.rangeHighlightElements.length > 0 && Array.isArray(this.options.rangeHighlights) && this.options.rangeHighlights.length > 0) { 1259 | for (var _i = 0; _i < this.options.rangeHighlights.length; _i++) { 1260 | var startPercent = this._toPercentage(this.options.rangeHighlights[_i].start); 1261 | var endPercent = this._toPercentage(this.options.rangeHighlights[_i].end); 1262 | 1263 | if (this.options.reversed) { 1264 | var sp = 100 - endPercent; 1265 | endPercent = 100 - startPercent; 1266 | startPercent = sp; 1267 | } 1268 | 1269 | var currentRange = this._createHighlightRange(startPercent, endPercent); 1270 | 1271 | if (currentRange) { 1272 | if (this.options.orientation === 'vertical') { 1273 | this.rangeHighlightElements[_i].style.top = currentRange.start + "%"; 1274 | this.rangeHighlightElements[_i].style.height = currentRange.size + "%"; 1275 | } else { 1276 | if (this.options.rtl) { 1277 | this.rangeHighlightElements[_i].style.right = currentRange.start + "%"; 1278 | } else { 1279 | this.rangeHighlightElements[_i].style.left = currentRange.start + "%"; 1280 | } 1281 | this.rangeHighlightElements[_i].style.width = currentRange.size + "%"; 1282 | } 1283 | } else { 1284 | this.rangeHighlightElements[_i].style.display = "none"; 1285 | } 1286 | } 1287 | } 1288 | 1289 | /* Position ticks and labels */ 1290 | if (Array.isArray(this.options.ticks) && this.options.ticks.length > 0) { 1291 | 1292 | var styleSize = this.options.orientation === 'vertical' ? 'height' : 'width'; 1293 | var styleMargin; 1294 | if (this.options.orientation === 'vertical') { 1295 | styleMargin = 'marginTop'; 1296 | } else { 1297 | if (this.options.rtl) { 1298 | styleMargin = 'marginRight'; 1299 | } else { 1300 | styleMargin = 'marginLeft'; 1301 | } 1302 | } 1303 | var labelSize = this._state.size / (this.options.ticks.length - 1); 1304 | 1305 | if (this.tickLabelContainer) { 1306 | var extraMargin = 0; 1307 | if (this.options.ticks_positions.length === 0) { 1308 | if (this.options.orientation !== 'vertical') { 1309 | this.tickLabelContainer.style[styleMargin] = -labelSize / 2 + "px"; 1310 | } 1311 | 1312 | extraMargin = this.tickLabelContainer.offsetHeight; 1313 | } else { 1314 | /* Chidren are position absolute, calculate height by finding the max offsetHeight of a child */ 1315 | for (i = 0; i < this.tickLabelContainer.childNodes.length; i++) { 1316 | if (this.tickLabelContainer.childNodes[i].offsetHeight > extraMargin) { 1317 | extraMargin = this.tickLabelContainer.childNodes[i].offsetHeight; 1318 | } 1319 | } 1320 | } 1321 | if (this.options.orientation === 'horizontal') { 1322 | this.sliderElem.style.marginBottom = extraMargin + "px"; 1323 | } 1324 | } 1325 | for (var i = 0; i < this.options.ticks.length; i++) { 1326 | 1327 | var percentage = this.options.ticks_positions[i] || this._toPercentage(this.options.ticks[i]); 1328 | 1329 | if (this.options.reversed) { 1330 | percentage = 100 - percentage; 1331 | } 1332 | 1333 | this.ticks[i].style[this.stylePos] = percentage + "%"; 1334 | 1335 | /* Set class labels to denote whether ticks are in the selection */ 1336 | this._removeClass(this.ticks[i], 'in-selection'); 1337 | if (!this.options.range) { 1338 | if (this.options.selection === 'after' && percentage >= positionPercentages[0]) { 1339 | this._addClass(this.ticks[i], 'in-selection'); 1340 | } else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) { 1341 | this._addClass(this.ticks[i], 'in-selection'); 1342 | } 1343 | } else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) { 1344 | this._addClass(this.ticks[i], 'in-selection'); 1345 | } 1346 | 1347 | if (this.tickLabels[i]) { 1348 | this.tickLabels[i].style[styleSize] = labelSize + "px"; 1349 | 1350 | if (this.options.orientation !== 'vertical' && this.options.ticks_positions[i] !== undefined) { 1351 | this.tickLabels[i].style.position = 'absolute'; 1352 | this.tickLabels[i].style[this.stylePos] = percentage + "%"; 1353 | this.tickLabels[i].style[styleMargin] = -labelSize / 2 + 'px'; 1354 | } else if (this.options.orientation === 'vertical') { 1355 | if (this.options.rtl) { 1356 | this.tickLabels[i].style['marginRight'] = this.sliderElem.offsetWidth + "px"; 1357 | } else { 1358 | this.tickLabels[i].style['marginLeft'] = this.sliderElem.offsetWidth + "px"; 1359 | } 1360 | this.tickLabelContainer.style[styleMargin] = this.sliderElem.offsetWidth / 2 * -1 + 'px'; 1361 | } 1362 | 1363 | /* Set class labels to indicate tick labels are in the selection or selected */ 1364 | this._removeClass(this.tickLabels[i], 'label-in-selection label-is-selection'); 1365 | if (!this.options.range) { 1366 | if (this.options.selection === 'after' && percentage >= positionPercentages[0]) { 1367 | this._addClass(this.tickLabels[i], 'label-in-selection'); 1368 | } else if (this.options.selection === 'before' && percentage <= positionPercentages[0]) { 1369 | this._addClass(this.tickLabels[i], 'label-in-selection'); 1370 | } 1371 | if (percentage === positionPercentages[0]) { 1372 | this._addClass(this.tickLabels[i], 'label-is-selection'); 1373 | } 1374 | } else if (percentage >= positionPercentages[0] && percentage <= positionPercentages[1]) { 1375 | this._addClass(this.tickLabels[i], 'label-in-selection'); 1376 | if (percentage === positionPercentages[0] || positionPercentages[1]) { 1377 | this._addClass(this.tickLabels[i], 'label-is-selection'); 1378 | } 1379 | } 1380 | } 1381 | } 1382 | } 1383 | 1384 | var formattedTooltipVal; 1385 | 1386 | if (this.options.range) { 1387 | formattedTooltipVal = this.options.formatter(this._state.value); 1388 | this._setText(this.tooltipInner, formattedTooltipVal); 1389 | this.tooltip.style[this.stylePos] = (positionPercentages[1] + positionPercentages[0]) / 2 + "%"; 1390 | 1391 | var innerTooltipMinText = this.options.formatter(this._state.value[0]); 1392 | this._setText(this.tooltipInner_min, innerTooltipMinText); 1393 | 1394 | var innerTooltipMaxText = this.options.formatter(this._state.value[1]); 1395 | this._setText(this.tooltipInner_max, innerTooltipMaxText); 1396 | 1397 | this.tooltip_min.style[this.stylePos] = positionPercentages[0] + "%"; 1398 | 1399 | this.tooltip_max.style[this.stylePos] = positionPercentages[1] + "%"; 1400 | } else { 1401 | formattedTooltipVal = this.options.formatter(this._state.value[0]); 1402 | this._setText(this.tooltipInner, formattedTooltipVal); 1403 | 1404 | this.tooltip.style[this.stylePos] = positionPercentages[0] + "%"; 1405 | } 1406 | 1407 | if (this.options.orientation === 'vertical') { 1408 | this.trackLow.style.top = '0'; 1409 | this.trackLow.style.height = Math.min(positionPercentages[0], positionPercentages[1]) + '%'; 1410 | 1411 | this.trackSelection.style.top = Math.min(positionPercentages[0], positionPercentages[1]) + '%'; 1412 | this.trackSelection.style.height = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%'; 1413 | 1414 | this.trackHigh.style.bottom = '0'; 1415 | this.trackHigh.style.height = 100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1]) + '%'; 1416 | } else { 1417 | if (this.stylePos === 'right') { 1418 | this.trackLow.style.right = '0'; 1419 | } else { 1420 | this.trackLow.style.left = '0'; 1421 | } 1422 | this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) + '%'; 1423 | 1424 | if (this.stylePos === 'right') { 1425 | this.trackSelection.style.right = Math.min(positionPercentages[0], positionPercentages[1]) + '%'; 1426 | } else { 1427 | this.trackSelection.style.left = Math.min(positionPercentages[0], positionPercentages[1]) + '%'; 1428 | } 1429 | this.trackSelection.style.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%'; 1430 | 1431 | if (this.stylePos === 'right') { 1432 | this.trackHigh.style.left = '0'; 1433 | } else { 1434 | this.trackHigh.style.right = '0'; 1435 | } 1436 | this.trackHigh.style.width = 100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1]) + '%'; 1437 | 1438 | var offset_min = this.tooltip_min.getBoundingClientRect(); 1439 | var offset_max = this.tooltip_max.getBoundingClientRect(); 1440 | 1441 | if (this.options.tooltip_position === 'bottom') { 1442 | if (offset_min.right > offset_max.left) { 1443 | this._removeClass(this.tooltip_max, 'bottom'); 1444 | this._addClass(this.tooltip_max, 'top'); 1445 | this.tooltip_max.style.top = ''; 1446 | this.tooltip_max.style.bottom = 22 + 'px'; 1447 | } else { 1448 | this._removeClass(this.tooltip_max, 'top'); 1449 | this._addClass(this.tooltip_max, 'bottom'); 1450 | this.tooltip_max.style.top = this.tooltip_min.style.top; 1451 | this.tooltip_max.style.bottom = ''; 1452 | } 1453 | } else { 1454 | if (offset_min.right > offset_max.left) { 1455 | this._removeClass(this.tooltip_max, 'top'); 1456 | this._addClass(this.tooltip_max, 'bottom'); 1457 | this.tooltip_max.style.top = 18 + 'px'; 1458 | } else { 1459 | this._removeClass(this.tooltip_max, 'bottom'); 1460 | this._addClass(this.tooltip_max, 'top'); 1461 | this.tooltip_max.style.top = this.tooltip_min.style.top; 1462 | } 1463 | } 1464 | } 1465 | }, 1466 | _createHighlightRange: function _createHighlightRange(start, end) { 1467 | if (this._isHighlightRange(start, end)) { 1468 | if (start > end) { 1469 | return { 'start': end, 'size': start - end }; 1470 | } 1471 | return { 'start': start, 'size': end - start }; 1472 | } 1473 | return null; 1474 | }, 1475 | _isHighlightRange: function _isHighlightRange(start, end) { 1476 | if (0 <= start && start <= 100 && 0 <= end && end <= 100) { 1477 | return true; 1478 | } else { 1479 | return false; 1480 | } 1481 | }, 1482 | _resize: function _resize(ev) { 1483 | /*jshint unused:false*/ 1484 | this._state.offset = this._offset(this.sliderElem); 1485 | this._state.size = this.sliderElem[this.sizePos]; 1486 | this._layout(); 1487 | }, 1488 | _removeProperty: function _removeProperty(element, prop) { 1489 | if (element.style.removeProperty) { 1490 | element.style.removeProperty(prop); 1491 | } else { 1492 | element.style.removeAttribute(prop); 1493 | } 1494 | }, 1495 | _mousedown: function _mousedown(ev) { 1496 | if (!this._state.enabled) { 1497 | return false; 1498 | } 1499 | 1500 | if (ev.preventDefault) { 1501 | ev.preventDefault(); 1502 | } 1503 | 1504 | this._state.offset = this._offset(this.sliderElem); 1505 | this._state.size = this.sliderElem[this.sizePos]; 1506 | 1507 | var percentage = this._getPercentage(ev); 1508 | 1509 | if (this.options.range) { 1510 | var diff1 = Math.abs(this._state.percentage[0] - percentage); 1511 | var diff2 = Math.abs(this._state.percentage[1] - percentage); 1512 | this._state.dragged = diff1 < diff2 ? 0 : 1; 1513 | this._adjustPercentageForRangeSliders(percentage); 1514 | } else { 1515 | this._state.dragged = 0; 1516 | } 1517 | 1518 | this._state.percentage[this._state.dragged] = percentage; 1519 | 1520 | if (this.touchCapable) { 1521 | document.removeEventListener("touchmove", this.mousemove, false); 1522 | document.removeEventListener("touchend", this.mouseup, false); 1523 | } 1524 | 1525 | if (this.mousemove) { 1526 | document.removeEventListener("mousemove", this.mousemove, false); 1527 | } 1528 | if (this.mouseup) { 1529 | document.removeEventListener("mouseup", this.mouseup, false); 1530 | } 1531 | 1532 | this.mousemove = this._mousemove.bind(this); 1533 | this.mouseup = this._mouseup.bind(this); 1534 | 1535 | if (this.touchCapable) { 1536 | // Touch: Bind touch events: 1537 | document.addEventListener("touchmove", this.mousemove, false); 1538 | document.addEventListener("touchend", this.mouseup, false); 1539 | } 1540 | // Bind mouse events: 1541 | document.addEventListener("mousemove", this.mousemove, false); 1542 | document.addEventListener("mouseup", this.mouseup, false); 1543 | 1544 | this._state.inDrag = true; 1545 | var newValue = this._calculateValue(); 1546 | 1547 | this._trigger('slideStart', newValue); 1548 | 1549 | this.setValue(newValue, false, true); 1550 | 1551 | ev.returnValue = false; 1552 | 1553 | if (this.options.focus) { 1554 | this._triggerFocusOnHandle(this._state.dragged); 1555 | } 1556 | 1557 | return true; 1558 | }, 1559 | _touchstart: function _touchstart(ev) { 1560 | if (ev.changedTouches === undefined) { 1561 | this._mousedown(ev); 1562 | return; 1563 | } 1564 | 1565 | var touch = ev.changedTouches[0]; 1566 | this.touchX = touch.pageX; 1567 | this.touchY = touch.pageY; 1568 | }, 1569 | _triggerFocusOnHandle: function _triggerFocusOnHandle(handleIdx) { 1570 | if (handleIdx === 0) { 1571 | this.handle1.focus(); 1572 | } 1573 | if (handleIdx === 1) { 1574 | this.handle2.focus(); 1575 | } 1576 | }, 1577 | _keydown: function _keydown(handleIdx, ev) { 1578 | if (!this._state.enabled) { 1579 | return false; 1580 | } 1581 | 1582 | var dir; 1583 | switch (ev.keyCode) { 1584 | case 37: // left 1585 | case 40: 1586 | // down 1587 | dir = -1; 1588 | break; 1589 | case 39: // right 1590 | case 38: 1591 | // up 1592 | dir = 1; 1593 | break; 1594 | } 1595 | if (!dir) { 1596 | return; 1597 | } 1598 | 1599 | // use natural arrow keys instead of from min to max 1600 | if (this.options.natural_arrow_keys) { 1601 | var isHorizontal = this.options.orientation === 'horizontal'; 1602 | var isVertical = this.options.orientation === 'vertical'; 1603 | var isRTL = this.options.rtl; 1604 | var isReversed = this.options.reversed; 1605 | 1606 | if (isHorizontal) { 1607 | if (isRTL) { 1608 | if (!isReversed) { 1609 | dir = -dir; 1610 | } 1611 | } else { 1612 | if (isReversed) { 1613 | dir = -dir; 1614 | } 1615 | } 1616 | } else if (isVertical) { 1617 | if (!isReversed) { 1618 | dir = -dir; 1619 | } 1620 | } 1621 | } 1622 | 1623 | var val; 1624 | if (this.ticksAreValid && this.options.lock_to_ticks) { 1625 | var index = void 0; 1626 | // Find tick index that handle 1/2 is currently on 1627 | index = this.options.ticks.indexOf(this._state.value[handleIdx]); 1628 | if (index === -1) { 1629 | // Set default to first tick 1630 | index = 0; 1631 | window.console.warn('(lock_to_ticks) _keydown: index should not be -1'); 1632 | } 1633 | index += dir; 1634 | index = Math.max(0, Math.min(this.options.ticks.length - 1, index)); 1635 | val = this.options.ticks[index]; 1636 | } else { 1637 | val = this._state.value[handleIdx] + dir * this.options.step; 1638 | } 1639 | var percentage = this._toPercentage(val); 1640 | this._state.keyCtrl = handleIdx; 1641 | if (this.options.range) { 1642 | this._adjustPercentageForRangeSliders(percentage); 1643 | var val1 = !this._state.keyCtrl ? val : this._state.value[0]; 1644 | var val2 = this._state.keyCtrl ? val : this._state.value[1]; 1645 | // Restrict values within limits 1646 | val = [Math.max(this.options.min, Math.min(this.options.max, val1)), Math.max(this.options.min, Math.min(this.options.max, val2))]; 1647 | } else { 1648 | val = Math.max(this.options.min, Math.min(this.options.max, val)); 1649 | } 1650 | 1651 | this._trigger('slideStart', val); 1652 | 1653 | this.setValue(val, true, true); 1654 | 1655 | this._trigger('slideStop', val); 1656 | 1657 | this._pauseEvent(ev); 1658 | delete this._state.keyCtrl; 1659 | 1660 | return false; 1661 | }, 1662 | _pauseEvent: function _pauseEvent(ev) { 1663 | if (ev.stopPropagation) { 1664 | ev.stopPropagation(); 1665 | } 1666 | if (ev.preventDefault) { 1667 | ev.preventDefault(); 1668 | } 1669 | ev.cancelBubble = true; 1670 | ev.returnValue = false; 1671 | }, 1672 | _mousemove: function _mousemove(ev) { 1673 | if (!this._state.enabled) { 1674 | return false; 1675 | } 1676 | 1677 | var percentage = this._getPercentage(ev); 1678 | this._adjustPercentageForRangeSliders(percentage); 1679 | this._state.percentage[this._state.dragged] = percentage; 1680 | 1681 | var val = this._calculateValue(true); 1682 | this.setValue(val, true, true); 1683 | 1684 | return false; 1685 | }, 1686 | _touchmove: function _touchmove(ev) { 1687 | if (ev.changedTouches === undefined) { 1688 | return; 1689 | } 1690 | 1691 | var touch = ev.changedTouches[0]; 1692 | 1693 | var xDiff = touch.pageX - this.touchX; 1694 | var yDiff = touch.pageY - this.touchY; 1695 | 1696 | if (!this._state.inDrag) { 1697 | // Vertical Slider 1698 | if (this.options.orientation === 'vertical' && xDiff <= 5 && xDiff >= -5 && (yDiff >= 15 || yDiff <= -15)) { 1699 | this._mousedown(ev); 1700 | } 1701 | // Horizontal slider. 1702 | else if (yDiff <= 5 && yDiff >= -5 && (xDiff >= 15 || xDiff <= -15)) { 1703 | this._mousedown(ev); 1704 | } 1705 | } 1706 | }, 1707 | _adjustPercentageForRangeSliders: function _adjustPercentageForRangeSliders(percentage) { 1708 | if (this.options.range) { 1709 | var precision = this._getNumDigitsAfterDecimalPlace(percentage); 1710 | precision = precision ? precision - 1 : 0; 1711 | var percentageWithAdjustedPrecision = this._applyToFixedAndParseFloat(percentage, precision); 1712 | if (this._state.dragged === 0 && this._applyToFixedAndParseFloat(this._state.percentage[1], precision) < percentageWithAdjustedPrecision) { 1713 | this._state.percentage[0] = this._state.percentage[1]; 1714 | this._state.dragged = 1; 1715 | } else if (this._state.dragged === 1 && this._applyToFixedAndParseFloat(this._state.percentage[0], precision) > percentageWithAdjustedPrecision) { 1716 | this._state.percentage[1] = this._state.percentage[0]; 1717 | this._state.dragged = 0; 1718 | } else if (this._state.keyCtrl === 0 && this._toPercentage(this._state.value[1]) < percentage) { 1719 | this._state.percentage[0] = this._state.percentage[1]; 1720 | this._state.keyCtrl = 1; 1721 | this.handle2.focus(); 1722 | } else if (this._state.keyCtrl === 1 && this._toPercentage(this._state.value[0]) > percentage) { 1723 | this._state.percentage[1] = this._state.percentage[0]; 1724 | this._state.keyCtrl = 0; 1725 | this.handle1.focus(); 1726 | } 1727 | } 1728 | }, 1729 | _mouseup: function _mouseup(ev) { 1730 | if (!this._state.enabled) { 1731 | return false; 1732 | } 1733 | 1734 | var percentage = this._getPercentage(ev); 1735 | this._adjustPercentageForRangeSliders(percentage); 1736 | this._state.percentage[this._state.dragged] = percentage; 1737 | 1738 | if (this.touchCapable) { 1739 | // Touch: Unbind touch event handlers: 1740 | document.removeEventListener("touchmove", this.mousemove, false); 1741 | document.removeEventListener("touchend", this.mouseup, false); 1742 | } 1743 | // Unbind mouse event handlers: 1744 | document.removeEventListener("mousemove", this.mousemove, false); 1745 | document.removeEventListener("mouseup", this.mouseup, false); 1746 | 1747 | this._state.inDrag = false; 1748 | if (this._state.over === false) { 1749 | this._hideTooltip(); 1750 | } 1751 | var val = this._calculateValue(true); 1752 | 1753 | this.setValue(val, false, true); 1754 | this._trigger('slideStop', val); 1755 | 1756 | // No longer need 'dragged' after mouse up 1757 | this._state.dragged = null; 1758 | 1759 | return false; 1760 | }, 1761 | _setValues: function _setValues(index, val) { 1762 | var comp = 0 === index ? 0 : 100; 1763 | if (this._state.percentage[index] !== comp) { 1764 | val.data[index] = this._toValue(this._state.percentage[index]); 1765 | val.data[index] = this._applyPrecision(val.data[index]); 1766 | } 1767 | }, 1768 | _calculateValue: function _calculateValue(snapToClosestTick) { 1769 | var val = {}; 1770 | if (this.options.range) { 1771 | val.data = [this.options.min, this.options.max]; 1772 | this._setValues(0, val); 1773 | this._setValues(1, val); 1774 | if (snapToClosestTick) { 1775 | val.data[0] = this._snapToClosestTick(val.data[0]); 1776 | val.data[1] = this._snapToClosestTick(val.data[1]); 1777 | } 1778 | } else { 1779 | val.data = this._toValue(this._state.percentage[0]); 1780 | val.data = parseFloat(val.data); 1781 | val.data = this._applyPrecision(val.data); 1782 | if (snapToClosestTick) { 1783 | val.data = this._snapToClosestTick(val.data); 1784 | } 1785 | } 1786 | 1787 | return val.data; 1788 | }, 1789 | _snapToClosestTick: function _snapToClosestTick(val) { 1790 | var min = [val, Infinity]; 1791 | for (var i = 0; i < this.options.ticks.length; i++) { 1792 | var diff = Math.abs(this.options.ticks[i] - val); 1793 | if (diff <= min[1]) { 1794 | min = [this.options.ticks[i], diff]; 1795 | } 1796 | } 1797 | if (min[1] <= this.options.ticks_snap_bounds) { 1798 | return min[0]; 1799 | } 1800 | return val; 1801 | }, 1802 | 1803 | _applyPrecision: function _applyPrecision(val) { 1804 | var precision = this.options.precision || this._getNumDigitsAfterDecimalPlace(this.options.step); 1805 | return this._applyToFixedAndParseFloat(val, precision); 1806 | }, 1807 | _getNumDigitsAfterDecimalPlace: function _getNumDigitsAfterDecimalPlace(num) { 1808 | var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); 1809 | if (!match) { 1810 | return 0; 1811 | } 1812 | return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0)); 1813 | }, 1814 | _applyToFixedAndParseFloat: function _applyToFixedAndParseFloat(num, toFixedInput) { 1815 | var truncatedNum = num.toFixed(toFixedInput); 1816 | return parseFloat(truncatedNum); 1817 | }, 1818 | /* 1819 | Credits to Mike Samuel for the following method! 1820 | Source: http://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number 1821 | */ 1822 | _getPercentage: function _getPercentage(ev) { 1823 | if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove')) { 1824 | ev = ev.touches[0]; 1825 | } 1826 | 1827 | var eventPosition = ev[this.mousePos]; 1828 | var sliderOffset = this._state.offset[this.stylePos]; 1829 | var distanceToSlide = eventPosition - sliderOffset; 1830 | if (this.stylePos === 'right') { 1831 | distanceToSlide = -distanceToSlide; 1832 | } 1833 | // Calculate what percent of the length the slider handle has slid 1834 | var percentage = distanceToSlide / this._state.size * 100; 1835 | percentage = Math.round(percentage / this._state.percentage[2]) * this._state.percentage[2]; 1836 | if (this.options.reversed) { 1837 | percentage = 100 - percentage; 1838 | } 1839 | 1840 | // Make sure the percent is within the bounds of the slider. 1841 | // 0% corresponds to the 'min' value of the slide 1842 | // 100% corresponds to the 'max' value of the slide 1843 | return Math.max(0, Math.min(100, percentage)); 1844 | }, 1845 | _validateInputValue: function _validateInputValue(val) { 1846 | if (!isNaN(+val)) { 1847 | return +val; 1848 | } else if (Array.isArray(val)) { 1849 | this._validateArray(val); 1850 | return val; 1851 | } else { 1852 | throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(val)); 1853 | } 1854 | }, 1855 | _validateArray: function _validateArray(val) { 1856 | for (var i = 0; i < val.length; i++) { 1857 | var input = val[i]; 1858 | if (typeof input !== 'number') { 1859 | throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input)); 1860 | } 1861 | } 1862 | }, 1863 | _setDataVal: function _setDataVal(val) { 1864 | this.element.setAttribute('data-value', val); 1865 | this.element.setAttribute('value', val); 1866 | this.element.value = val; 1867 | }, 1868 | _trigger: function _trigger(evt, val) { 1869 | val = val || val === 0 ? val : undefined; 1870 | 1871 | var callbackFnArray = this.eventToCallbackMap[evt]; 1872 | if (callbackFnArray && callbackFnArray.length) { 1873 | for (var i = 0; i < callbackFnArray.length; i++) { 1874 | var callbackFn = callbackFnArray[i]; 1875 | callbackFn(val); 1876 | } 1877 | } 1878 | 1879 | /* If JQuery exists, trigger JQuery events */ 1880 | if ($) { 1881 | this._triggerJQueryEvent(evt, val); 1882 | } 1883 | }, 1884 | _triggerJQueryEvent: function _triggerJQueryEvent(evt, val) { 1885 | var eventData = { 1886 | type: evt, 1887 | value: val 1888 | }; 1889 | this.$element.trigger(eventData); 1890 | this.$sliderElem.trigger(eventData); 1891 | }, 1892 | _unbindJQueryEventHandlers: function _unbindJQueryEventHandlers() { 1893 | this.$element.off(); 1894 | this.$sliderElem.off(); 1895 | }, 1896 | _setText: function _setText(element, text) { 1897 | if (typeof element.textContent !== "undefined") { 1898 | element.textContent = text; 1899 | } else if (typeof element.innerText !== "undefined") { 1900 | element.innerText = text; 1901 | } 1902 | }, 1903 | _removeClass: function _removeClass(element, classString) { 1904 | var classes = classString.split(" "); 1905 | var newClasses = element.className; 1906 | 1907 | for (var i = 0; i < classes.length; i++) { 1908 | var classTag = classes[i]; 1909 | var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)"); 1910 | newClasses = newClasses.replace(regex, " "); 1911 | } 1912 | 1913 | element.className = newClasses.trim(); 1914 | }, 1915 | _addClass: function _addClass(element, classString) { 1916 | var classes = classString.split(" "); 1917 | var newClasses = element.className; 1918 | 1919 | for (var i = 0; i < classes.length; i++) { 1920 | var classTag = classes[i]; 1921 | var regex = new RegExp("(?:\\s|^)" + classTag + "(?:\\s|$)"); 1922 | var ifClassExists = regex.test(newClasses); 1923 | 1924 | if (!ifClassExists) { 1925 | newClasses += " " + classTag; 1926 | } 1927 | } 1928 | 1929 | element.className = newClasses.trim(); 1930 | }, 1931 | _offsetLeft: function _offsetLeft(obj) { 1932 | return obj.getBoundingClientRect().left; 1933 | }, 1934 | _offsetRight: function _offsetRight(obj) { 1935 | return obj.getBoundingClientRect().right; 1936 | }, 1937 | _offsetTop: function _offsetTop(obj) { 1938 | var offsetTop = obj.offsetTop; 1939 | while ((obj = obj.offsetParent) && !isNaN(obj.offsetTop)) { 1940 | offsetTop += obj.offsetTop; 1941 | if (obj.tagName !== 'BODY') { 1942 | offsetTop -= obj.scrollTop; 1943 | } 1944 | } 1945 | return offsetTop; 1946 | }, 1947 | _offset: function _offset(obj) { 1948 | return { 1949 | left: this._offsetLeft(obj), 1950 | right: this._offsetRight(obj), 1951 | top: this._offsetTop(obj) 1952 | }; 1953 | }, 1954 | _css: function _css(elementRef, styleName, value) { 1955 | if ($) { 1956 | $.style(elementRef, styleName, value); 1957 | } else { 1958 | var style = styleName.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function (all, letter) { 1959 | return letter.toUpperCase(); 1960 | }); 1961 | elementRef.style[style] = value; 1962 | } 1963 | }, 1964 | _toValue: function _toValue(percentage) { 1965 | return this.options.scale.toValue.apply(this, [percentage]); 1966 | }, 1967 | _toPercentage: function _toPercentage(value) { 1968 | return this.options.scale.toPercentage.apply(this, [value]); 1969 | }, 1970 | _setTooltipPosition: function _setTooltipPosition() { 1971 | var tooltips = [this.tooltip, this.tooltip_min, this.tooltip_max]; 1972 | if (this.options.orientation === 'vertical') { 1973 | var tooltipPos; 1974 | if (this.options.tooltip_position) { 1975 | tooltipPos = this.options.tooltip_position; 1976 | } else { 1977 | if (this.options.rtl) { 1978 | tooltipPos = 'left'; 1979 | } else { 1980 | tooltipPos = 'right'; 1981 | } 1982 | } 1983 | var oppositeSide = tooltipPos === 'left' ? 'right' : 'left'; 1984 | tooltips.forEach(function (tooltip) { 1985 | this._addClass(tooltip, tooltipPos); 1986 | tooltip.style[oppositeSide] = '100%'; 1987 | }.bind(this)); 1988 | } else if (this.options.tooltip_position === 'bottom') { 1989 | tooltips.forEach(function (tooltip) { 1990 | this._addClass(tooltip, 'bottom'); 1991 | tooltip.style.top = 22 + 'px'; 1992 | }.bind(this)); 1993 | } else { 1994 | tooltips.forEach(function (tooltip) { 1995 | this._addClass(tooltip, 'top'); 1996 | tooltip.style.top = -this.tooltip.outerHeight - 14 + 'px'; 1997 | }.bind(this)); 1998 | } 1999 | }, 2000 | _getClosestTickIndex: function _getClosestTickIndex(val) { 2001 | var difference = Math.abs(val - this.options.ticks[0]); 2002 | var index = 0; 2003 | for (var i = 0; i < this.options.ticks.length; ++i) { 2004 | var d = Math.abs(val - this.options.ticks[i]); 2005 | if (d < difference) { 2006 | difference = d; 2007 | index = i; 2008 | } 2009 | } 2010 | return index; 2011 | }, 2012 | /** 2013 | * Attempts to find the index in `ticks[]` the slider values are set at. 2014 | * The indexes can be -1 to indicate the slider value is not set at a value in `ticks[]`. 2015 | */ 2016 | _setTickIndex: function _setTickIndex() { 2017 | if (this.ticksAreValid) { 2018 | this._state.tickIndex = [this.options.ticks.indexOf(this._state.value[0]), this.options.ticks.indexOf(this._state.value[1])]; 2019 | } 2020 | } 2021 | }; 2022 | 2023 | /********************************* 2024 | Attach to global namespace 2025 | *********************************/ 2026 | if ($ && $.fn) { 2027 | if (!$.fn.slider) { 2028 | $.bridget(NAMESPACE_MAIN, Slider); 2029 | autoRegisterNamespace = NAMESPACE_MAIN; 2030 | } else { 2031 | if (windowIsDefined) { 2032 | window.console.warn("bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead."); 2033 | } 2034 | autoRegisterNamespace = NAMESPACE_ALTERNATE; 2035 | } 2036 | $.bridget(NAMESPACE_ALTERNATE, Slider); 2037 | 2038 | // Auto-Register data-provide="slider" Elements 2039 | $(function () { 2040 | $("input[data-provide=slider]")[autoRegisterNamespace](); 2041 | }); 2042 | } 2043 | })($); 2044 | 2045 | return Slider; 2046 | }); -------------------------------------------------------------------------------- /src/assets/js/bootstrap-slider.min.js: -------------------------------------------------------------------------------- 1 | /*! ======================================================= 2 | VERSION 10.5.0 3 | ========================================================= */ 4 | "use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},windowIsDefined="object"===("undefined"==typeof window?"undefined":_typeof(window));!function(a){if("function"==typeof define&&define.amd)define(["jquery"],a);else if("object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports){var b;try{b=require("jquery")}catch(c){b=null}module.exports=a(b)}else window&&(window.Slider=a(window.jQuery))}(function(a){var b="slider",c="bootstrapSlider";windowIsDefined&&!window.console&&(window.console={}),windowIsDefined&&!window.console.log&&(window.console.log=function(){}),windowIsDefined&&!window.console.warn&&(window.console.warn=function(){});var d;return function(a){function b(){}function c(a){function c(b){b.prototype.option||(b.prototype.option=function(b){a.isPlainObject(b)&&(this.options=a.extend(!0,this.options,b))})}function e(b,c){a.fn[b]=function(e){if("string"==typeof e){for(var g=d.call(arguments,1),h=0,i=this.length;i>h;h++){var j=this[h],k=a.data(j,b);if(k)if(a.isFunction(k[e])&&"_"!==e.charAt(0)){var l=k[e].apply(k,g);if(void 0!==l&&l!==k)return l}else f("no such method '"+e+"' for "+b+" instance");else f("cannot call methods on "+b+" prior to initialization; attempted to call '"+e+"'")}return this}var m=this.map(function(){var d=a.data(this,b);return d?(d.option(e),d._init()):(d=new c(this,e),a.data(this,b,d)),a(this)});return!m||m.length>1?m:m[0]}}if(a){var f="undefined"==typeof console?b:function(a){console.error(a)};return a.bridget=function(a,b){c(b),e(a,b)},a.bridget}}var d=Array.prototype.slice;c(a)}(a),function(a){function e(b,c){function d(a,b){var c="data-slider-"+b.replace(/_/g,"-"),d=a.getAttribute(c);try{return JSON.parse(d)}catch(e){return d}}this._state={value:null,enabled:null,offset:null,size:null,percentage:null,inDrag:!1,over:!1,tickIndex:null},this.ticksCallbackMap={},this.handleCallbackMap={},"string"==typeof b?this.element=document.querySelector(b):b instanceof HTMLElement&&(this.element=b),c=c?c:{};for(var e=Object.keys(this.defaultOptions),f=c.hasOwnProperty("min"),g=c.hasOwnProperty("max"),i=0;i0,this.ticksAreValid||(this.options.lock_to_ticks=!1),"auto"===this.options.rtl){var l=window.getComputedStyle(this.element);null!=l?this.options.rtl="rtl"===l.direction:this.options.rtl="rtl"===this.element.style.direction}"vertical"!==this.options.orientation||"top"!==this.options.tooltip_position&&"bottom"!==this.options.tooltip_position?"horizontal"!==this.options.orientation||"left"!==this.options.tooltip_position&&"right"!==this.options.tooltip_position||(this.options.tooltip_position="top"):this.options.rtl?this.options.tooltip_position="left":this.options.tooltip_position="right";var m,n,o,p,q,r=this.element.style.width,s=!1,t=this.element.parentNode;if(this.sliderElem)s=!0;else{this.sliderElem=document.createElement("div"),this.sliderElem.className="slider";var u=document.createElement("div");u.className="slider-track",n=document.createElement("div"),n.className="slider-track-low",m=document.createElement("div"),m.className="slider-selection",o=document.createElement("div"),o.className="slider-track-high",p=document.createElement("div"),p.className="slider-handle min-slider-handle",p.setAttribute("role","slider"),p.setAttribute("aria-valuemin",this.options.min),p.setAttribute("aria-valuemax",this.options.max),q=document.createElement("div"),q.className="slider-handle max-slider-handle",q.setAttribute("role","slider"),q.setAttribute("aria-valuemin",this.options.min),q.setAttribute("aria-valuemax",this.options.max),u.appendChild(n),u.appendChild(m),u.appendChild(o),this.rangeHighlightElements=[];var v=this.options.rangeHighlights;if(Array.isArray(v)&&v.length>0)for(var w=0;w0){for(this.ticksContainer=document.createElement("div"),this.ticksContainer.className="slider-tick-container",i=0;i0)for(this.tickLabelContainer=document.createElement("div"),this.tickLabelContainer.className="slider-tick-label-container",i=0;i0&&(g||(this.options.max=Math.max.apply(Math,this.options.ticks)),f||(this.options.min=Math.min.apply(Math,this.options.ticks))),Array.isArray(this.options.value)?(this.options.range=!0,this._state.value=this.options.value):this.options.range?this._state.value=[this.options.value,this.options.max]:this._state.value=this.options.value,this.trackLow=n||this.trackLow,this.trackSelection=m||this.trackSelection,this.trackHigh=o||this.trackHigh,"none"===this.options.selection?(this._addClass(this.trackLow,"hide"),this._addClass(this.trackSelection,"hide"),this._addClass(this.trackHigh,"hide")):("after"===this.options.selection||"before"===this.options.selection)&&(this._removeClass(this.trackLow,"hide"),this._removeClass(this.trackSelection,"hide"),this._removeClass(this.trackHigh,"hide")),this.handle1=p||this.handle1,this.handle2=q||this.handle2,s===!0)for(this._removeClass(this.handle1,"round triangle"),this._removeClass(this.handle2,"round triangle hide"),i=0;ib.max?b.max:a},toValue:function(a){var b=a/100*(this.options.max-this.options.min),c=!0;if(this.options.ticks_positions.length>0){for(var d,e,f,g=0,i=1;i0){for(var b,c,d,e=0,f=0;f0?this.options.ticks[f-1]:0,d=f>0?this.options.ticks_positions[f-1]:0,c=this.options.ticks[f],e=this.options.ticks_positions[f];break}if(f>0){var g=(a-b)/(c-b);return d+g*(e-d)}}return 100*(a-this.options.min)/(this.options.max-this.options.min)}},logarithmic:{toValue:function(a){var b=1-this.options.min,c=Math.log(this.options.min+b),d=Math.log(this.options.max+b),e=Math.exp(c+(d-c)*a/100)-b;return Math.round(e)===d?d:(e=this.options.min+Math.round((e-this.options.min)/this.options.step)*this.options.step,h.linear.getValue(e,this.options))},toPercentage:function(a){if(this.options.max===this.options.min)return 0;var b=1-this.options.min,c=Math.log(this.options.max+b),d=Math.log(this.options.min+b),e=Math.log(a+b);return 100*(e-d)/(c-d)}}};d=function(a,b){return e.call(this,a,b),this},d.prototype={_init:function(){},constructor:d,defaultOptions:{id:"",min:0,max:10,step:1,precision:0,orientation:"horizontal",value:0,range:!1,selection:"before",tooltip:"show",tooltip_split:!1,lock_to_ticks:!1,handle:"round",reversed:!1,rtl:"auto",enabled:!0,formatter:function(a){return Array.isArray(a)?a[0]+" : "+a[1]:a},natural_arrow_keys:!1,ticks:[],ticks_positions:[],ticks_labels:[],ticks_snap_bounds:0,ticks_tooltip:!1,scale:"linear",focus:!1,tooltip_position:null,labelledby:null,rangeHighlights:[]},getElement:function(){return this.sliderElem},getValue:function(){return this.options.range?this._state.value:this._state.value[0]},setValue:function(a,b,c){a||(a=0);var d=this.getValue();this._state.value=this._validateInputValue(a);var e=this._applyPrecision.bind(this);this.options.range?(this._state.value[0]=e(this._state.value[0]),this._state.value[1]=e(this._state.value[1]),this.ticksAreValid&&this.options.lock_to_ticks&&(this._state.value[0]=this.options.ticks[this._getClosestTickIndex(this._state.value[0])],this._state.value[1]=this.options.ticks[this._getClosestTickIndex(this._state.value[1])]),this._state.value[0]=Math.max(this.options.min,Math.min(this.options.max,this._state.value[0])),this._state.value[1]=Math.max(this.options.min,Math.min(this.options.max,this._state.value[1]))):(this._state.value=e(this._state.value),this.ticksAreValid&&this.options.lock_to_ticks&&(this._state.value=this.options.ticks[this._getClosestTickIndex(this._state.value)]),this._state.value=[Math.max(this.options.min,Math.min(this.options.max,this._state.value))],this._addClass(this.handle2,"hide"),"after"===this.options.selection?this._state.value[1]=this.options.max:this._state.value[1]=this.options.min),this._setTickIndex(),this.options.max>this.options.min?this._state.percentage=[this._toPercentage(this._state.value[0]),this._toPercentage(this._state.value[1]),100*this.options.step/(this.options.max-this.options.min)]:this._state.percentage=[0,0,100],this._layout();var f=this.options.range?this._state.value:this._state.value[0];this._setDataVal(f),b===!0&&this._trigger("slide",f);var g=!1;return g=Array.isArray(f)?d[0]!==f[0]||d[1]!==f[1]:d!==f,g&&c===!0&&this._trigger("change",{oldValue:d,newValue:f}),this},destroy:function(){this._removeSliderEventHandlers(),this.sliderElem.parentNode.removeChild(this.sliderElem),this.element.style.display="",this._cleanUpEventCallbacksMap(),this.element.removeAttribute("data"),a&&(this._unbindJQueryEventHandlers(),f===b&&this.$element.removeData(f),this.$element.removeData(c))},disable:function(){return this._state.enabled=!1,this.handle1.removeAttribute("tabindex"),this.handle2.removeAttribute("tabindex"),this._addClass(this.sliderElem,"slider-disabled"),this._trigger("slideDisabled"),this},enable:function(){return this._state.enabled=!0,this.handle1.setAttribute("tabindex",0),this.handle2.setAttribute("tabindex",0),this._removeClass(this.sliderElem,"slider-disabled"),this._trigger("slideEnabled"),this},toggle:function(){return this._state.enabled?this.disable():this.enable(),this},isEnabled:function(){return this._state.enabled},on:function(a,b){return this._bindNonQueryEventHandler(a,b),this},off:function(b,c){a?(this.$element.off(b,c),this.$sliderElem.off(b,c)):this._unbindNonQueryEventHandler(b,c)},getAttribute:function(a){return a?this.options[a]:this.options},setAttribute:function(a,b){return this.options[a]=b,this},refresh:function(){return this._removeSliderEventHandlers(),e.call(this,this.element,this.options),a&&(f===b?(a.data(this.element,b,this),a.data(this.element,c,this)):a.data(this.element,c,this)),this},relayout:function(){return this._resize(),this},_removeTooltipListener:function(a){this.handle1.removeEventListener(a,this.showTooltip,!1),this.handle2.removeEventListener(a,this.showTooltip,!1)},_removeSliderEventHandlers:function(){if(this.handle1.removeEventListener("keydown",this.handle1Keydown,!1),this.handle2.removeEventListener("keydown",this.handle2Keydown,!1),this.options.ticks_tooltip){for(var a=this.ticksContainer.getElementsByClassName("slider-tick"),b=0;b0&&a.options.ticks_positions[c]||a._toPercentage(a.options.ticks[c])):f=a._toPercentage(e),d.value[0]=e,d.percentage[0]=f,a._setToolTipOnMouseOver(d),a._showTooltip()};return b.addEventListener("mouseenter",d,!1),d},addMouseLeave:function(a,b){var c=function(){a._hideTooltip()};return b.addEventListener("mouseleave",c,!1),c}}},_layout:function(){var a,b;if(a=this.options.reversed?[100-this._state.percentage[0],this.options.range?100-this._state.percentage[1]:this._state.percentage[1]]:[this._state.percentage[0],this._state.percentage[1]],this.handle1.style[this.stylePos]=a[0]+"%",this.handle1.setAttribute("aria-valuenow",this._state.value[0]),b=this.options.formatter(this._state.value[0]),isNaN(b)?this.handle1.setAttribute("aria-valuetext",b):this.handle1.removeAttribute("aria-valuetext"),this.handle2.style[this.stylePos]=a[1]+"%",this.handle2.setAttribute("aria-valuenow",this._state.value[1]),b=this.options.formatter(this._state.value[1]),isNaN(b)?this.handle2.setAttribute("aria-valuetext",b):this.handle2.removeAttribute("aria-valuetext"),this.rangeHighlightElements.length>0&&Array.isArray(this.options.rangeHighlights)&&this.options.rangeHighlights.length>0)for(var c=0;c0){var h,i="vertical"===this.options.orientation?"height":"width";h="vertical"===this.options.orientation?"marginTop":this.options.rtl?"marginRight":"marginLeft";var j=this._state.size/(this.options.ticks.length-1);if(this.tickLabelContainer){var k=0;if(0===this.options.ticks_positions.length)"vertical"!==this.options.orientation&&(this.tickLabelContainer.style[h]=-j/2+"px"),k=this.tickLabelContainer.offsetHeight;else for(l=0;lk&&(k=this.tickLabelContainer.childNodes[l].offsetHeight);"horizontal"===this.options.orientation&&(this.sliderElem.style.marginBottom=k+"px")}for(var l=0;l=a[0]&&m<=a[1]&&this._addClass(this.ticks[l],"in-selection"):"after"===this.options.selection&&m>=a[0]?this._addClass(this.ticks[l],"in-selection"):"before"===this.options.selection&&m<=a[0]&&this._addClass(this.ticks[l],"in-selection"),this.tickLabels[l]&&(this.tickLabels[l].style[i]=j+"px","vertical"!==this.options.orientation&&void 0!==this.options.ticks_positions[l]?(this.tickLabels[l].style.position="absolute",this.tickLabels[l].style[this.stylePos]=m+"%",this.tickLabels[l].style[h]=-j/2+"px"):"vertical"===this.options.orientation&&(this.options.rtl?this.tickLabels[l].style.marginRight=this.sliderElem.offsetWidth+"px":this.tickLabels[l].style.marginLeft=this.sliderElem.offsetWidth+"px",this.tickLabelContainer.style[h]=this.sliderElem.offsetWidth/2*-1+"px"),this._removeClass(this.tickLabels[l],"label-in-selection label-is-selection"),this.options.range?m>=a[0]&&m<=a[1]&&(this._addClass(this.tickLabels[l],"label-in-selection"),(m===a[0]||a[1])&&this._addClass(this.tickLabels[l],"label-is-selection")):("after"===this.options.selection&&m>=a[0]?this._addClass(this.tickLabels[l],"label-in-selection"):"before"===this.options.selection&&m<=a[0]&&this._addClass(this.tickLabels[l],"label-in-selection"),m===a[0]&&this._addClass(this.tickLabels[l],"label-is-selection")))}}var n;if(this.options.range){n=this.options.formatter(this._state.value),this._setText(this.tooltipInner,n),this.tooltip.style[this.stylePos]=(a[1]+a[0])/2+"%";var o=this.options.formatter(this._state.value[0]);this._setText(this.tooltipInner_min,o);var p=this.options.formatter(this._state.value[1]);this._setText(this.tooltipInner_max,p),this.tooltip_min.style[this.stylePos]=a[0]+"%",this.tooltip_max.style[this.stylePos]=a[1]+"%"}else n=this.options.formatter(this._state.value[0]),this._setText(this.tooltipInner,n),this.tooltip.style[this.stylePos]=a[0]+"%";if("vertical"===this.options.orientation)this.trackLow.style.top="0",this.trackLow.style.height=Math.min(a[0],a[1])+"%",this.trackSelection.style.top=Math.min(a[0],a[1])+"%",this.trackSelection.style.height=Math.abs(a[0]-a[1])+"%",this.trackHigh.style.bottom="0",this.trackHigh.style.height=100-Math.min(a[0],a[1])-Math.abs(a[0]-a[1])+"%";else{"right"===this.stylePos?this.trackLow.style.right="0":this.trackLow.style.left="0",this.trackLow.style.width=Math.min(a[0],a[1])+"%","right"===this.stylePos?this.trackSelection.style.right=Math.min(a[0],a[1])+"%":this.trackSelection.style.left=Math.min(a[0],a[1])+"%",this.trackSelection.style.width=Math.abs(a[0]-a[1])+"%","right"===this.stylePos?this.trackHigh.style.left="0":this.trackHigh.style.right="0",this.trackHigh.style.width=100-Math.min(a[0],a[1])-Math.abs(a[0]-a[1])+"%";var q=this.tooltip_min.getBoundingClientRect(),r=this.tooltip_max.getBoundingClientRect();"bottom"===this.options.tooltip_position?q.right>r.left?(this._removeClass(this.tooltip_max,"bottom"),this._addClass(this.tooltip_max,"top"),this.tooltip_max.style.top="",this.tooltip_max.style.bottom="22px"):(this._removeClass(this.tooltip_max,"top"),this._addClass(this.tooltip_max,"bottom"),this.tooltip_max.style.top=this.tooltip_min.style.top,this.tooltip_max.style.bottom=""):q.right>r.left?(this._removeClass(this.tooltip_max,"top"),this._addClass(this.tooltip_max,"bottom"),this.tooltip_max.style.top="18px"):(this._removeClass(this.tooltip_max,"bottom"),this._addClass(this.tooltip_max,"top"),this.tooltip_max.style.top=this.tooltip_min.style.top)}},_createHighlightRange:function(a,b){return this._isHighlightRange(a,b)?a>b?{start:b,size:a-b}:{start:a,size:b-a}:null},_isHighlightRange:function(a,b){return a>=0&&100>=a&&b>=0&&100>=b?!0:!1},_resize:function(a){this._state.offset=this._offset(this.sliderElem),this._state.size=this.sliderElem[this.sizePos],this._layout()},_removeProperty:function(a,b){a.style.removeProperty?a.style.removeProperty(b):a.style.removeAttribute(b)},_mousedown:function(a){if(!this._state.enabled)return!1;a.preventDefault&&a.preventDefault(),this._state.offset=this._offset(this.sliderElem),this._state.size=this.sliderElem[this.sizePos];var b=this._getPercentage(a);if(this.options.range){var c=Math.abs(this._state.percentage[0]-b),d=Math.abs(this._state.percentage[1]-b);this._state.dragged=d>c?0:1,this._adjustPercentageForRangeSliders(b)}else this._state.dragged=0;this._state.percentage[this._state.dragged]=b,this.touchCapable&&(document.removeEventListener("touchmove",this.mousemove,!1),document.removeEventListener("touchend",this.mouseup,!1)),this.mousemove&&document.removeEventListener("mousemove",this.mousemove,!1),this.mouseup&&document.removeEventListener("mouseup",this.mouseup,!1),this.mousemove=this._mousemove.bind(this),this.mouseup=this._mouseup.bind(this),this.touchCapable&&(document.addEventListener("touchmove",this.mousemove,!1),document.addEventListener("touchend",this.mouseup,!1)),document.addEventListener("mousemove",this.mousemove,!1),document.addEventListener("mouseup",this.mouseup,!1),this._state.inDrag=!0;var e=this._calculateValue();return this._trigger("slideStart",e),this.setValue(e,!1,!0),a.returnValue=!1,this.options.focus&&this._triggerFocusOnHandle(this._state.dragged),!0},_touchstart:function(a){if(void 0===a.changedTouches)return void this._mousedown(a);var b=a.changedTouches[0];this.touchX=b.pageX,this.touchY=b.pageY},_triggerFocusOnHandle:function(a){0===a&&this.handle1.focus(),1===a&&this.handle2.focus()},_keydown:function(a,b){if(!this._state.enabled)return!1;var c;switch(b.keyCode){case 37:case 40:c=-1;break;case 39:case 38:c=1}if(c){if(this.options.natural_arrow_keys){var d="horizontal"===this.options.orientation,e="vertical"===this.options.orientation,f=this.options.rtl,g=this.options.reversed;d?f?g||(c=-c):g&&(c=-c):e&&(g||(c=-c))}var h;if(this.ticksAreValid&&this.options.lock_to_ticks){var i=void 0;i=this.options.ticks.indexOf(this._state.value[a]),-1===i&&(i=0,window.console.warn("(lock_to_ticks) _keydown: index should not be -1")),i+=c,i=Math.max(0,Math.min(this.options.ticks.length-1,i)),h=this.options.ticks[i]}else h=this._state.value[a]+c*this.options.step;var j=this._toPercentage(h);if(this._state.keyCtrl=a,this.options.range){this._adjustPercentageForRangeSliders(j);var k=this._state.keyCtrl?this._state.value[0]:h,l=this._state.keyCtrl?h:this._state.value[1];h=[Math.max(this.options.min,Math.min(this.options.max,k)),Math.max(this.options.min,Math.min(this.options.max,l))]}else h=Math.max(this.options.min,Math.min(this.options.max,h));return this._trigger("slideStart",h),this.setValue(h,!0,!0),this._trigger("slideStop",h),this._pauseEvent(b),delete this._state.keyCtrl,!1}},_pauseEvent:function(a){a.stopPropagation&&a.stopPropagation(),a.preventDefault&&a.preventDefault(),a.cancelBubble=!0,a.returnValue=!1},_mousemove:function(a){if(!this._state.enabled)return!1;var b=this._getPercentage(a);this._adjustPercentageForRangeSliders(b),this._state.percentage[this._state.dragged]=b;var c=this._calculateValue(!0);return this.setValue(c,!0,!0),!1},_touchmove:function(a){if(void 0!==a.changedTouches){var b=a.changedTouches[0],c=b.pageX-this.touchX,d=b.pageY-this.touchY;this._state.inDrag||("vertical"===this.options.orientation&&5>=c&&c>=-5&&(d>=15||-15>=d)?this._mousedown(a):5>=d&&d>=-5&&(c>=15||-15>=c)&&this._mousedown(a))}},_adjustPercentageForRangeSliders:function(a){if(this.options.range){var b=this._getNumDigitsAfterDecimalPlace(a);b=b?b-1:0;var c=this._applyToFixedAndParseFloat(a,b);0===this._state.dragged&&this._applyToFixedAndParseFloat(this._state.percentage[1],b)c?(this._state.percentage[1]=this._state.percentage[0],this._state.dragged=0):0===this._state.keyCtrl&&this._toPercentage(this._state.value[1])a&&(this._state.percentage[1]=this._state.percentage[0], 5 | this._state.keyCtrl=0,this.handle1.focus())}},_mouseup:function(a){if(!this._state.enabled)return!1;var b=this._getPercentage(a);this._adjustPercentageForRangeSliders(b),this._state.percentage[this._state.dragged]=b,this.touchCapable&&(document.removeEventListener("touchmove",this.mousemove,!1),document.removeEventListener("touchend",this.mouseup,!1)),document.removeEventListener("mousemove",this.mousemove,!1),document.removeEventListener("mouseup",this.mouseup,!1),this._state.inDrag=!1,this._state.over===!1&&this._hideTooltip();var c=this._calculateValue(!0);return this.setValue(c,!1,!0),this._trigger("slideStop",c),this._state.dragged=null,!1},_setValues:function(a,b){var c=0===a?0:100;this._state.percentage[a]!==c&&(b.data[a]=this._toValue(this._state.percentage[a]),b.data[a]=this._applyPrecision(b.data[a]))},_calculateValue:function(a){var b={};return this.options.range?(b.data=[this.options.min,this.options.max],this._setValues(0,b),this._setValues(1,b),a&&(b.data[0]=this._snapToClosestTick(b.data[0]),b.data[1]=this._snapToClosestTick(b.data[1]))):(b.data=this._toValue(this._state.percentage[0]),b.data=parseFloat(b.data),b.data=this._applyPrecision(b.data),a&&(b.data=this._snapToClosestTick(b.data))),b.data},_snapToClosestTick:function(a){for(var b=[a,1/0],c=0;ce&&(b=e,c=d)}return c},_setTickIndex:function(){this.ticksAreValid&&(this._state.tickIndex=[this.options.ticks.indexOf(this._state.value[0]),this.options.ticks.indexOf(this._state.value[1])])}},a&&a.fn&&(a.fn.slider?(windowIsDefined&&window.console.warn("bootstrap-slider.js - WARNING: $.fn.slider namespace is already bound. Use the $.fn.bootstrapSlider namespace instead."),f=c):(a.bridget(b,d),f=b),a.bridget(c,d),a(function(){a("input[data-provide=slider]")[f]()}))}(a),d}); --------------------------------------------------------------------------------