add rangeParamns option

consultnn · Oct 3, 2018 · 4b944e9 · 4b944e9
1 parent 2e825fc
commit 4b944e9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/InputRange.js b/InputRange.js
@@ -5,6 +5,7 @@ class InputRange {
 		this.__element = element;
 		this.__input = options.input || this.__element.getElementsByTagName('input')[0];
 		this.__range = options.range || this.__element.getElementsByClassName('range-slider')[0];
+		this.__rangeParams = options.rangeParams || null;
 
 		if (this.__input == null) {
 			throw new Error('InputRange: input does not exists');
@@ -18,17 +19,21 @@ class InputRange {
 
 		if (this.__range) {
 			if (window.noUiSlider) {
-				noUiSlider.create(this.__range, {
-					start: this.__input.value,
-					connect: 'lower',
-					step: parseInt(this.__range.dataset.step) || 1,
-					range: {
-						'min': parseInt(this.__input.dataset.min) ||
-								parseInt(this.__range.dataset.min) || 0,
-						'max': parseInt(this.__input.dataset.max) ||
-								parseInt(this.__range.dataset.max) || 100
-					}
-				});
+				if (this.__rangeParams) {
+					noUiSlider.create(this.__range, this.__rangeParams);
+				} else {
+					noUiSlider.create(this.__range, {
+						start: this.__input.value,
+						connect: 'lower',
+						step: parseInt(this.__range.dataset.step) || 1,
+						range: {
+							'min': parseInt(this.__input.dataset.min) ||
+							parseInt(this.__range.dataset.min) || 0,
+							'max': parseInt(this.__input.dataset.max) ||
+							parseInt(this.__range.dataset.max) || 100
+						}
+					});
+				}
 
 				this.__slider = this.__range.noUiSlider;
 
@@ -39,7 +44,7 @@ class InputRange {
 			}
 		}
 
-		if (this.__input.input) {
+		if (this.__input.isPrettyInput) {
 			this.__input.onChange = this.__onChange.bind(this);
 		} else {
 			this.__input.addEventListener('change', this.__onChange.bind(this));

diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ new InputRange(element: Node, options:Object = {});
 - **max**:int - максимальное значение в поле ввода. Влияет и на значение в поле ввода, и на слайдер. По умолчанию - 100.
 - **onChange** - функция, которая будет выполняться при изменении значения value
 - **onRangeChange** - функция, которая будет выполняться при изменении значений min/max
+- **rangeParams**:Object - объект настроек для noUiSlider. Если не задан, то берутся настройки из options.
 
 ## Атрибуты
 

diff --git a/demo.html b/demo.html
@@ -38,7 +38,7 @@ <h3>Поле ввода со слайдером</h3>
     </div>
     <div class="column">
         <h3>Поле ввода с настраиваемой версткой</h3>
-        <input type="text" data-min="100" data-max="500" id="js-example2-input">
+        <input type="text" data-min="300000" data-max="100000000" id="js-example2-input">
     </div>
     <div class="column">
         <div class="range-slider" id="js-example2-range" data-step="10"></div>
@@ -65,7 +65,19 @@ <h3>Форма (с PrettyInput)</h3>
     let p = new InputRange(document.getElementById('example'));
     let n = new InputRange(document.getElementsByClassName('column')[1], {
         input: new PrettyInput(document.getElementById('js-example2-input')),
-        range: document.getElementById('js-example2-range')
+        range: document.getElementById('js-example2-range'),
+        rangeParams: {
+            start: 100,
+            connect: "lower",
+            range: {
+                'min': [300000, 50000],
+                '33%': [1000000, 100000],
+                '55%': [2000000, 100000],
+                '65%': [3000000, 100000],
+                '75%': [4000000, 150000],
+                'max': [100000000, 250000]
+            }
+        }
     });
 
     let f = new InputRange(document.querySelector('#formExample'), {