var app = angular.module('plunker', []);
app.directive('rangeSlider', ['$parse',
function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var parsed = {
modelFromFn: $parse(attrs.modelFrom),
modelToFn: $parse(attrs.modelTo)
},
isUpdating = false,
isFirstStart = true;
var getOptions = function() {
return scope.$eval(attrs.rangeOptions);
};
// Performs update actions only when no other update is in progress
// Optionally, a call to scope.$apply is made
var update = function(action, apply) {
if (isUpdating) return;
isUpdating = true;
try {
action();
} finally {
if (apply) {
try {
scope.$apply();
} catch (e) {}
}
isUpdating = false;
}
};
var initSlider = function () {
var opts = angular.extend({
min: 0,
max: 10000,
type: 'double',
prefix: "$",
prettify: true,
hasGrid: true
}, getOptions()),
onSliderChanged = angular.noop;
if (typeof opts.onSliderChanged == 'function') {
onSliderChanged = opts.onSliderChanged;
delete opts.onSliderChanged;
}
opts.from = parsed.modelFromFn(scope) || 0;
opts.to = parsed.modelToFn(scope) || 1000;
opts.onFinish = function(data) {
update(function () {
parsed.modelFromFn.assign(scope, data.fromNumber);
parsed.modelToFn.assign(scope, data.toNumber);
onSliderChanged(angular.copy(opts));
console.log('slider changed');
}, true);
};
update(function () {
element.ionRangeSlider(opts);
});
};
initSlider();
scope.$watch(getOptions, function(newValue, oldValue) {
delete newValue.onSliderChanged;
if (isFirstStart) {
isFirstStart = false;
return;
}
update(function () {
element.ionRangeSlider('update', newValue);
});
}, true);
scope.$watch(attrs.modelFrom, function(newValue, oldValue) {
if (newValue == oldValue) return;
update(function () {
element.ionRangeSlider('update', { from: newValue });
});
});
scope.$watch(attrs.modelTo, function(newValue, oldValue) {
if (newValue == oldValue) return;
update(function () {
element.ionRangeSlider('update', { to: newValue });
});
});
}
};
}
]);
app.controller('MainCtrl', function($scope) {
$scope.priceFrom = 1500;
$scope.priceTo = 3000;
$scope.rangeOptions = {
min: 0,
max: 5000,
step: 200,
onSliderChanged: function(data) {
console.log(data);
}
}
$scope.setStep = function(value) {
$scope.rangeOptions.step = Number(value);
};
$scope.setFromValue = function(value) {
$scope.priceFrom = Number(value);
};
$scope.setToValue = function(value) {
$scope.priceTo = Number(value);
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="rangeSlider.css" />
<link rel="stylesheet" href="rangeSlider.skin1.css" />
<script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="rangeSlider.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label>Min: {{rangeOptions.min}}</label>
<br />
<label>Max: {{rangeOptions.max}}</label>
<br />
<label>From: {{priceFrom}}</label>
<br />
<label>To: {{priceTo}}</label>
<br />
<label>Step: {{rangeOptions.step}}</label>
<br />
<br />
<input type="text" id="rangeSlider" range-slider="" model-from="priceFrom" model-to="priceTo" range-options="rangeOptions" />
<br />
<br />Change Min:
<input type="range" min="0" max="2500" step="500" ng-model="rangeOptions.min" />{{rangeOptions.min}}
<br />Change Max:
<input type="range" min="5000" max="15000" step="500" ng-model="rangeOptions.max" />{{rangeOptions.max}}
<br />Change Step:
<input type="range" min="100" max="500" step="100" ng-model="rangeOptions.step" />{{rangeOptions.step}}
<br />Set From Value:
<input id="priceFrom" type="number" step="{{rangeOptions.step}}" min="{{rangeOptions.min}}" max="{{priceTo}}" ng-model="priceFrom" />
<br />Set From Value:
<input id="priceTo" type="number" step="{{rangeOptions.step}}" min="{{priceFrom}}" max="{{rangeOptions.max}}" ng-model="priceTo" />
<br />
<br />
<br />
<button ng-click="setFromValue(100)">Set valueFrom 100</button>
<button ng-click="setToValue(1500)">Set valueTo 1500</button>
</body>
</html>
/* Put your css in here */
// Ion.RangeSlider
// version 1.9.3 Build: 176
// © 2013-2014 Denis Ineshin | IonDen.com
//
// Project page: http://ionden.com/a/plugins/ion.rangeSlider/
// GitHub page: https://github.com/IonDen/ion.rangeSlider
//
// Released under MIT licence:
// http://ionden.com/a/plugins/licence-en.html
// =====================================================================================================================
(function ($, document, window, navigator) {
"use strict";
var plugin_count = 0,
current;
var is_old_ie = (function () {
var n = navigator.userAgent,
r = /msie\s\d+/i,
v;
if (n.search(r) > 0) {
v = r.exec(n).toString();
v = v.split(" ")[1];
if (v < 9) {
return true;
}
}
return false;
}());
var is_touch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
var testNumber = function (num) {
if (typeof num === "number") {
if (isNaN(num)) {
return null;
} else {
return num;
}
} else {
num = parseFloat(num);
if (isNaN(num)) {
return null;
} else {
return num;
}
}
};
var methods = {
init: function (options) {
// irs = ion range slider css prefix
var baseHTML =
'<span class="irs">' +
'<span class="irs-line"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span>' +
'<span class="irs-min">0</span><span class="irs-max">1</span>' +
'<span class="irs-from">0</span><span class="irs-to">0</span><span class="irs-single">0</span>' +
'</span>' +
'<span class="irs-grid"></span>';
var singleHTML =
'<span class="irs-slider single"></span>';
var doubleHTML =
'<span class="irs-diapason"></span>' +
'<span class="irs-slider from"></span>' +
'<span class="irs-slider to"></span>';
var disableHTML =
'<span class="irs-disable-mask"></span>';
return this.each(function () {
var settings = $.extend({
min: null,
max: null,
from: null,
to: null,
type: "single",
step: null,
prefix: "",
postfix: "",
maxPostfix: "",
hasGrid: false,
gridMargin: 0,
hideMinMax: false,
hideFromTo: false,
prettify: true,
disable: false,
values: null,
onLoad: null,
onChange: null,
onFinish: null
}, options);
var slider = $(this),
self = this,
allow_values = false,
value_array = null;
if (slider.data("isActive")) {
return;
}
slider.data("isActive", true);
plugin_count += 1;
this.plugin_count = plugin_count;
// check default values
if (slider.prop("value")) {
value_array = slider.prop("value").split(";");
}
if (settings.type === "single") {
if (value_array && value_array.length > 1) {
if (typeof settings.min !== "number") {
settings.min = parseFloat(value_array[0]);
} else {
if (typeof settings.from !== "number") {
settings.from = parseFloat(value_array[0]);
}
}
if (typeof settings.max !== "number") {
settings.max = parseFloat(value_array[1]);
}
} else if (value_array && value_array.length === 1) {
if (typeof settings.from !== "number") {
settings.from = parseFloat(value_array[0]);
}
}
} else if (settings.type === "double") {
if (value_array && value_array.length > 1) {
if (typeof settings.min !== "number") {
settings.min = parseFloat(value_array[0]);
} else {
if (typeof settings.from !== "number") {
settings.from = parseFloat(value_array[0]);
}
}
if (typeof settings.max !== "number") {
settings.max = parseFloat(value_array[1]);
} else {
if (typeof settings.to !== "number") {
settings.to = parseFloat(value_array[1]);
}
}
} else if (value_array && value_array.length === 1) {
if (typeof settings.min !== "number") {
settings.min = parseFloat(value_array[0]);
} else {
if (typeof settings.from !== "number") {
settings.from = parseFloat(value_array[0]);
}
}
}
}
// extend from data-*
if (typeof slider.data("min") === "number") {
settings.min = parseFloat(slider.data("min"));
}
if (typeof slider.data("max") === "number") {
settings.max = parseFloat(slider.data("max"));
}
if (typeof slider.data("from") === "number") {
settings.from = parseFloat(slider.data("from"));
}
if (typeof slider.data("to") === "number") {
settings.to = parseFloat(slider.data("to"));
}
if (slider.data("step")) {
settings.step = parseFloat(slider.data("step"));
}
if (slider.data("type")) {
settings.type = slider.data("type");
}
if (slider.data("prefix")) {
settings.prefix = slider.data("prefix");
}
if (slider.data("postfix")) {
settings.postfix = slider.data("postfix");
}
if (slider.data("maxpostfix")) {
settings.maxPostfix = slider.data("maxpostfix");
}
if (slider.data("hasgrid")) {
settings.hasGrid = slider.data("hasgrid");
}
if (slider.data("gridmargin")) {
settings.gridMargin = +slider.data("gridmargin");
}
if (slider.data("hideminmax")) {
settings.hideMinMax = slider.data("hideminmax");
}
if (slider.data("hidefromto")) {
settings.hideFromTo = slider.data("hidefromto");
}
if (slider.data("prettify")) {
settings.prettify = slider.data("prettify");
}
if (slider.data("disable")) {
settings.disable = slider.data("disable");
}
if (slider.data("values")) {
settings.values = slider.data("values").split(",");
}
// Set Min and Max if no
settings.min = testNumber(settings.min);
if (!settings.min && settings.min !== 0) {
settings.min = 10;
}
settings.max = testNumber(settings.max);
if (!settings.max && settings.max !== 0) {
settings.max = 100;
}
// Set values
if (Object.prototype.toString.call(settings.values) !== "[object Array]") {
settings.values = null;
}
if (settings.values && settings.values.length > 0) {
settings.min = 0;
settings.max = settings.values.length - 1;
settings.step = 1;
allow_values = true;
}
// Set From and To if no
settings.from = testNumber(settings.from);
if (!settings.from && settings.from !== 0) {
settings.from = settings.min;
}
settings.to = testNumber(settings.to);
if (!settings.to && settings.to !== 0) {
settings.to = settings.max;
}
// Set step
settings.step = testNumber(settings.step);
if (!settings.step) {
settings.step = 1;
}
// fix diapason
if (settings.from < settings.min) {
settings.from = settings.min;
}
if (settings.from > settings.max) {
settings.from = settings.min;
}
if (settings.to < settings.min) {
settings.to = settings.max;
}
if (settings.to > settings.max) {
settings.to = settings.max;
}
if (settings.type === "double") {
if (settings.from > settings.to) {
settings.from = settings.to;
}
if (settings.to < settings.from) {
settings.to = settings.from;
}
}
var prettify = function (num) {
var n = num.toString();
if (settings.prettify) {
n = n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1 ");
}
return n;
};
var containerHTML = '<span class="irs" id="irs-' + this.plugin_count + '"></span>';
slider[0].style.display = "none";
slider.before(containerHTML);
var $container = slider.prev(),
$body = $(document.body),
$window = $(window),
$rangeSlider,
$fieldMin,
$fieldMax,
$fieldFrom,
$fieldTo,
$fieldSingle,
$singleSlider,
$fromSlider,
$toSlider,
$activeSlider,
$diapason,
$grid;
var allowDrag = false,
is_slider_active = false,
is_first_start = true,
numbers = {};
var mouseX = 0,
fieldMinWidth = 0,
fieldMaxWidth = 0,
normalWidth = 0,
fullWidth = 0,
sliderWidth = 0,
width = 0,
left = 0,
right = 0,
minusX = 0,
stepFloat = 0;
if (parseInt(settings.step, 10) !== parseFloat(settings.step)) {
stepFloat = settings.step.toString().split(".")[1];
stepFloat = Math.pow(10, stepFloat.length);
}
// public methods
this.updateData = function (options) {
$.extend(settings, options);
removeHTML();
};
this.removeSlider = function () {
$container.find("*").off();
$window.off("mouseup.irs" + self.plugin_count);
$body.off("mouseup.irs" + self.plugin_count);
$body.off("mouseleave.irs" + self.plugin_count);
$body.off("mousemove.irs" + self.plugin_count);
$container.html("").remove();
slider.data("isActive", false);
slider.show();
};
// private methods
var removeHTML = function () {
$container.find("*").off();
$window.off("mouseup.irs" + self.plugin_count);
$body.off("mouseup.irs" + self.plugin_count);
$body.off("mouseleave.irs" + self.plugin_count);
$body.off("mousemove.irs" + self.plugin_count);
$container.html("");
placeHTML();
};
var placeHTML = function () {
$container.html(baseHTML);
$rangeSlider = $container.find(".irs");
$fieldMin = $rangeSlider.find(".irs-min");
$fieldMax = $rangeSlider.find(".irs-max");
$fieldFrom = $rangeSlider.find(".irs-from");
$fieldTo = $rangeSlider.find(".irs-to");
$fieldSingle = $rangeSlider.find(".irs-single");
$grid = $container.find(".irs-grid");
if (settings.hideFromTo) {
$fieldFrom[0].style.visibility = "hidden";
$fieldTo[0].style.visibility = "hidden";
$fieldSingle[0].style.visibility = "hidden";
}
if (!settings.hideFromTo) {
$fieldFrom[0].style.visibility = "visible";
$fieldTo[0].style.visibility = "visible";
$fieldSingle[0].style.visibility = "visible";
}
if (settings.hideMinMax) {
$fieldMin[0].style.visibility = "hidden";
$fieldMax[0].style.visibility = "hidden";
fieldMinWidth = 0;
fieldMaxWidth = 0;
}
if (!settings.hideMinMax) {
$fieldMin[0].style.visibility = "visible";
$fieldMax[0].style.visibility = "visible";
if (settings.values) {
$fieldMin.html(settings.prefix + settings.values[0] + settings.postfix);
$fieldMax.html(settings.prefix + settings.values[settings.values.length - 1] + settings.maxPostfix + settings.postfix);
} else {
$fieldMin.html(settings.prefix + prettify(settings.min) + settings.postfix);
$fieldMax.html(settings.prefix + prettify(settings.max) + settings.maxPostfix + settings.postfix);
}
fieldMinWidth = $fieldMin.outerWidth(false);
fieldMaxWidth = $fieldMax.outerWidth(false);
}
bindEvents();
};
var bindEvents = function () {
if (settings.type === "single") {
$rangeSlider.append(singleHTML);
$singleSlider = $rangeSlider.find(".single");
$singleSlider.on("mousedown", function (e) {
e.preventDefault();
e.stopPropagation();
calcDimensions(e, $(this), null);
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
if (is_old_ie) {
$("*").prop("unselectable", true);
}
});
if (is_touch) {
$singleSlider.on("touchstart", function (e) {
e.preventDefault();
e.stopPropagation();
calcDimensions(e.originalEvent.touches[0], $(this), null);
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
});
}
} else if (settings.type === "double") {
$rangeSlider.append(doubleHTML);
$fromSlider = $rangeSlider.find(".from");
$toSlider = $rangeSlider.find(".to");
$diapason = $rangeSlider.find(".irs-diapason");
setDiapason();
$fromSlider.on("mousedown", function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("last");
$toSlider.removeClass("last");
calcDimensions(e, $(this), "from");
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
if (is_old_ie) {
$("*").prop("unselectable", true);
}
});
$toSlider.on("mousedown", function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("last");
$fromSlider.removeClass("last");
calcDimensions(e, $(this), "to");
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
if (is_old_ie) {
$("*").prop("unselectable", true);
}
});
if (is_touch) {
$fromSlider.on("touchstart", function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("last");
$toSlider.removeClass("last");
calcDimensions(e.originalEvent.touches[0], $(this), "from");
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
});
$toSlider.on("touchstart", function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("last");
$fromSlider.removeClass("last");
calcDimensions(e.originalEvent.touches[0], $(this), "to");
allowDrag = true;
is_slider_active = true;
current = self.plugin_count;
});
}
if (settings.to === settings.max) {
$fromSlider.addClass("last");
}
}
var mouseup = function () {
if (current !== self.plugin_count) {
return;
}
if (allowDrag) {
is_slider_active = false;
allowDrag = false;
$activeSlider.removeAttr("id");
$activeSlider = null;
if (settings.type === "double") {
setDiapason();
}
getNumbers();
if (is_old_ie) {
$("*").prop("unselectable", false);
}
}
};
$window.on("mouseup.irs" + self.plugin_count, function () {
mouseup();
});
if (is_old_ie) {
$body.on("mouseleave.irs" + self.plugin_count, function () {
mouseup();
});
}
$body.on("mousemove.irs" + self.plugin_count, function (e) {
if (allowDrag) {
mouseX = e.pageX;
dragSlider();
}
});
$container.on("mousedown", function () {
current = self.plugin_count;
});
$container.on("mouseup", function (e) {
if (current !== self.plugin_count) {
return;
}
if (allowDrag || settings.disable) {
return;
}
moveByClick(e.pageX);
});
if (is_touch) {
$window.on("touchend", function () {
if (allowDrag) {
is_slider_active = false;
allowDrag = false;
$activeSlider.removeAttr("id");
$activeSlider = null;
if (settings.type === "double") {
setDiapason();
}
getNumbers();
}
});
$window.on("touchmove", function (e) {
if (allowDrag) {
mouseX = e.originalEvent.touches[0].pageX;
dragSlider();
}
});
}
getSize();
setNumbers();
if (settings.hasGrid) {
setGrid();
}
if (settings.disable) {
setMask();
} else {
removeMask();
}
};
var getSize = function () {
normalWidth = $rangeSlider.width();
if ($singleSlider) {
sliderWidth = $singleSlider.width();
} else {
sliderWidth = $fromSlider.width();
}
fullWidth = normalWidth - sliderWidth;
};
var calcDimensions = function (e, currentSlider, whichSlider) {
getSize();
is_first_start = false;
$activeSlider = currentSlider;
$activeSlider.prop("id", "irs-active-slider");
var _x1 = $activeSlider.offset().left,
_x2 = e.pageX - _x1;
minusX = _x1 + _x2 - $activeSlider.position().left;
if (settings.type === "single") {
width = $rangeSlider.width() - sliderWidth;
} else if (settings.type === "double") {
if (whichSlider === "from") {
left = 0;
right = parseInt($toSlider.css("left"), 10);
} else {
left = parseInt($fromSlider.css("left"), 10);
right = $rangeSlider.width() - sliderWidth;
}
}
};
var setDiapason = function () {
var _w = $fromSlider.width(),
_x = $.data($fromSlider[0], "x") || parseInt($fromSlider[0].style.left, 10) || $fromSlider.position().left,
_width = $.data($toSlider[0], "x") || parseInt($toSlider[0].style.left, 10) || $toSlider.position().left,
x = _x + (_w / 2),
w = _width - _x;
$diapason[0].style.left = x + "px";
$diapason[0].style.width = w + "px";
};
var dragSlider = function (manual_x) {
var x_pure = mouseX - minusX,
x;
if (manual_x) {
x_pure = manual_x;
} else {
x_pure = mouseX - minusX;
}
if (settings.type === "single") {
if (x_pure < 0) {
x_pure = 0;
}
if (x_pure > width) {
x_pure = width;
}
} else if (settings.type === "double") {
if (x_pure < left) {
x_pure = left;
}
if (x_pure > right) {
x_pure = right;
}
setDiapason();
}
$.data($activeSlider[0], "x", x_pure);
getNumbers();
x = Math.round(x_pure);
$activeSlider[0].style.left = x + "px";
};
var getNumbers = function () {
var nums = {
input: slider,
slider: $container,
min: settings.min,
max: settings.max,
fromNumber: 0,
toNumber: 0,
fromPers: 0,
toPers: 0,
fromX: 0,
fromX_pure: 0,
toX: 0,
toX_pure: 0
};
var diapason = settings.max - settings.min, _from, _to;
if (settings.type === "single") {
nums.fromX = $.data($singleSlider[0], "x") || parseInt($singleSlider[0].style.left, 10) || $singleSlider.position().left;
nums.fromPers = nums.fromX / fullWidth * 100;
_from = (diapason / 100 * nums.fromPers) + settings.min;
nums.fromNumber = Math.round(_from / settings.step) * settings.step;
if (nums.fromNumber < settings.min) {
nums.fromNumber = settings.min;
}
if (nums.fromNumber > settings.max) {
nums.fromNumber = settings.max;
}
if (stepFloat) {
nums.fromNumber = parseInt(nums.fromNumber * stepFloat, 10) / stepFloat;
}
if (allow_values) {
nums.fromValue = settings.values[nums.fromNumber];
}
} else if (settings.type === "double") {
nums.fromX = $.data($fromSlider[0], "x") || parseInt($fromSlider[0].style.left, 10) || $fromSlider.position().left;
nums.fromPers = nums.fromX / fullWidth * 100;
_from = (diapason / 100 * nums.fromPers) + settings.min;
nums.fromNumber = Math.round(_from / settings.step) * settings.step;
if (nums.fromNumber < settings.min) {
nums.fromNumber = settings.min;
}
nums.toX = $.data($toSlider[0], "x") || parseInt($toSlider[0].style.left, 10) || $toSlider.position().left;
nums.toPers = nums.toX / fullWidth * 100;
_to = (diapason / 100 * nums.toPers) + settings.min;
nums.toNumber = Math.round(_to / settings.step) * settings.step;
if (nums.toNumber > settings.max) {
nums.toNumber = settings.max;
}
if (stepFloat) {
nums.fromNumber = parseInt(nums.fromNumber * stepFloat, 10) / stepFloat;
nums.toNumber = parseInt(nums.toNumber * stepFloat, 10) / stepFloat;
}
if (allow_values) {
nums.fromValue = settings.values[nums.fromNumber];
nums.toValue = settings.values[nums.toNumber];
}
}
numbers = nums;
setFields();
};
var setNumbers = function () {
var nums = {
input: slider,
slider: $container,
min: settings.min,
max: settings.max,
fromNumber: settings.from,
toNumber: settings.to,
fromPers: 0,
toPers: 0,
fromX: 0,
fromX_pure: 0,
toX: 0,
toX_pure: 0
};
var diapason = settings.max - settings.min;
if (settings.type === "single") {
nums.fromPers = (diapason !== 0) ? (nums.fromNumber - settings.min) / diapason * 100 : 0;
nums.fromX_pure = fullWidth / 100 * nums.fromPers;
nums.fromX = Math.round(nums.fromX_pure);
$singleSlider[0].style.left = nums.fromX + "px";
$.data($singleSlider[0], "x", nums.fromX_pure);
} else if (settings.type === "double") {
nums.fromPers = (diapason !== 0) ? (nums.fromNumber - settings.min) / diapason * 100 : 0;
nums.fromX_pure = fullWidth / 100 * nums.fromPers;
nums.fromX = Math.round(nums.fromX_pure);
$fromSlider[0].style.left = nums.fromX + "px";
$.data($fromSlider[0], "x", nums.fromX_pure);
nums.toPers = (diapason !== 0) ? (nums.toNumber - settings.min) / diapason * 100 : 1;
nums.toX_pure = fullWidth / 100 * nums.toPers;
nums.toX = Math.round(nums.toX_pure);
$toSlider[0].style.left = nums.toX + "px";
$.data($toSlider[0], "x", nums.toX_pure);
setDiapason();
}
numbers = nums;
setFields();
};
var moveByClick = function (page_x) {
is_first_start = false;
var x = page_x - $container.offset().left,
d = numbers.toX - numbers.fromX,
zero_point = numbers.fromX + (d / 2);
left = 0;
width = $rangeSlider.width() - sliderWidth;
right = $rangeSlider.width() - sliderWidth;
if (settings.type === "single") {
$activeSlider = $singleSlider;
$activeSlider.prop("id", "irs-active-slider");
dragSlider(x);
} else if (settings.type === "double") {
if (x <= zero_point) {
$activeSlider = $fromSlider;
} else {
$activeSlider = $toSlider;
}
$activeSlider.prop("id", "irs-active-slider");
dragSlider(x);
setDiapason();
}
$activeSlider.removeAttr("id");
$activeSlider = null;
};
var setFields = function () {
var _from, _fromW, _fromX,
_to, _toW, _toX,
_single, _singleW, _singleX,
_slW = (sliderWidth / 2),
maxPostfix = "";
if (settings.type === "single") {
if (numbers.fromNumber === settings.max) {
maxPostfix = settings.maxPostfix;
} else {
maxPostfix = "";
}
$fieldFrom[0].style.display = "none";
$fieldTo[0].style.display = "none";
if (allow_values) {
_single =
settings.prefix +
settings.values[numbers.fromNumber] +
maxPostfix +
settings.postfix;
} else {
_single =
settings.prefix +
prettify(numbers.fromNumber) +
maxPostfix +
settings.postfix;
}
$fieldSingle.html(_single);
_singleW = $fieldSingle.outerWidth(false);
_singleX = numbers.fromX - (_singleW / 2) + _slW;
if (_singleX < 0) {
_singleX = 0;
}
if (_singleX > normalWidth - _singleW) {
_singleX = normalWidth - _singleW;
}
$fieldSingle[0].style.left = _singleX + "px";
if (!settings.hideMinMax && !settings.hideFromTo) {
if (_singleX < fieldMinWidth) {
$fieldMin[0].style.display = "none";
} else {
$fieldMin[0].style.display = "block";
}
if (_singleX + _singleW > normalWidth - fieldMaxWidth) {
$fieldMax[0].style.display = "none";
} else {
$fieldMax[0].style.display = "block";
}
}
slider.prop("value", parseFloat(numbers.fromNumber));
} else if (settings.type === "double") {
if (numbers.fromNumber === settings.max) {
maxPostfix = settings.maxPostfix;
} else {
maxPostfix = "";
}
if (numbers.toNumber === settings.max) {
maxPostfix = settings.maxPostfix;
} else {
maxPostfix = "";
}
if (allow_values) {
_from =
settings.prefix +
settings.values[numbers.fromNumber] +
settings.postfix;
_to =
settings.prefix +
settings.values[numbers.toNumber] +
maxPostfix +
settings.postfix;
if (numbers.fromNumber !== numbers.toNumber) {
_single =
settings.prefix +
settings.values[numbers.fromNumber] +
" — " + settings.prefix +
settings.values[numbers.toNumber] +
maxPostfix +
settings.postfix;
} else {
_single =
settings.prefix +
settings.values[numbers.fromNumber] +
maxPostfix +
settings.postfix;
}
} else {
_from =
settings.prefix +
prettify(numbers.fromNumber) +
settings.postfix;
_to =
settings.prefix +
prettify(numbers.toNumber) +
maxPostfix +
settings.postfix;
if (numbers.fromNumber !== numbers.toNumber) {
_single =
settings.prefix +
prettify(numbers.fromNumber) +
" — " + settings.prefix +
prettify(numbers.toNumber) +
maxPostfix +
settings.postfix;
} else {
_single =
settings.prefix +
prettify(numbers.fromNumber) +
maxPostfix +
settings.postfix;
}
}
$fieldFrom.html(_from);
$fieldTo.html(_to);
$fieldSingle.html(_single);
_fromW = $fieldFrom.outerWidth(false);
_fromX = numbers.fromX - (_fromW / 2) + _slW;
if (_fromX < 0) {
_fromX = 0;
}
if (_fromX > normalWidth - _fromW) {
_fromX = normalWidth - _fromW;
}
$fieldFrom[0].style.left = _fromX + "px";
_toW = $fieldTo.outerWidth(false);
_toX = numbers.toX - (_toW / 2) + _slW;
if (_toX < 0) {
_toX = 0;
}
if (_toX > normalWidth - _toW) {
_toX = normalWidth - _toW;
}
$fieldTo[0].style.left = _toX + "px";
_singleW = $fieldSingle.outerWidth(false);
_singleX = numbers.fromX + ((numbers.toX - numbers.fromX) / 2) - (_singleW / 2) + _slW;
if (_singleX < 0) {
_singleX = 0;
}
if (_singleX > normalWidth - _singleW) {
_singleX = normalWidth - _singleW;
}
$fieldSingle[0].style.left = _singleX + "px";
if (_fromX + _fromW < _toX) {
$fieldSingle[0].style.display = "none";
$fieldFrom[0].style.display = "block";
$fieldTo[0].style.display = "block";
} else {
$fieldSingle[0].style.display = "block";
$fieldFrom[0].style.display = "none";
$fieldTo[0].style.display = "none";
}
if (!settings.hideMinMax && !settings.hideFromTo) {
if (_singleX < fieldMinWidth || _fromX < fieldMinWidth) {
$fieldMin[0].style.display = "none";
} else {
$fieldMin[0].style.display = "block";
}
if (_singleX + _singleW > normalWidth - fieldMaxWidth || _toX + _toW > normalWidth - fieldMaxWidth) {
$fieldMax[0].style.display = "none";
} else {
$fieldMax[0].style.display = "block";
}
}
slider.prop("value", parseFloat(numbers.fromNumber) + ";" + parseFloat(numbers.toNumber));
}
settings.from = numbers.fromNumber;
settings.to = numbers.toNumber;
callbacks();
};
var callbacks = function () {
// trigger onFinish function
if (typeof settings.onFinish === "function" && !is_slider_active && !is_first_start) {
settings.onFinish.call(this, numbers);
}
// trigger onChange function
if (typeof settings.onChange === "function" && !is_first_start) {
settings.onChange.call(this, numbers);
}
// trigger onLoad function
if (typeof settings.onLoad === "function" && !is_slider_active && is_first_start) {
settings.onLoad.call(this, numbers);
is_first_start = false;
}
};
var setGrid = function () {
$container.addClass("irs-with-grid");
var i,
text = '',
step = 0,
tStep = 0,
gridHTML = '',
smNum = 20,
bigNum = 4,
cont_width = normalWidth - (settings.gridMargin * 2) - 20.5;
for (i = 0; i <= smNum; i += 1) {
step = Math.floor((cont_width / smNum * i) + 0);
if (step >= cont_width) {
step = cont_width - 1;
}
gridHTML += '<span class="irs-grid-pol small" style="left: ' + step + 'px;"></span>';
}
for (i = 0; i <= bigNum; i += 1) {
step = Math.floor((cont_width / bigNum * i) + 0);
if (step >= cont_width) {
step = cont_width - 1;
}
gridHTML += '<span class="irs-grid-pol" style="left: ' + step + 'px;"></span>';
if (stepFloat) {
text = (settings.min + ((settings.max - settings.min) / bigNum * i));
text = (text / settings.step) * settings.step;
text = parseInt(text * stepFloat, 10) / stepFloat;
} else {
text = Math.round(settings.min + ((settings.max - settings.min) / bigNum * i));
text = Math.round(text / settings.step) * settings.step;
text = prettify(text);
}
if (allow_values) {
if (settings.hideMinMax) {
text = Math.round(settings.min + ((settings.max - settings.min) / bigNum * i));
text = Math.round(text / settings.step) * settings.step;
if (i === 0 || i === bigNum) {
text = settings.values[text];
} else {
text = "";
}
} else {
text = "";
}
}
if (i === 0) {
tStep = step;
gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px; text-align: left;">' + text + '</span>';
} else if (i === bigNum) {
tStep = step - 100;
gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px; text-align: right;">' + text + '</span>';
} else {
tStep = step - 50;
gridHTML += '<span class="irs-grid-text" style="left: ' + tStep + 'px;">' + text + '</span>';
}
}
$grid.html(gridHTML);
$grid[0].style.left = settings.gridMargin + "px";
};
// Disable state
var setMask = function () {
$container.addClass("irs-disabled");
$container.append(disableHTML);
};
var removeMask = function () {
$container.removeClass("irs-disabled");
$container.find(".irs-disable-mask").remove();
};
placeHTML();
});
},
update: function (options) {
return this.each(function () {
this.updateData(options);
});
},
remove: function () {
return this.each(function () {
this.removeSlider();
});
}
};
$.fn.ionRangeSlider = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist for jQuery.ionRangeSlider');
}
};
}(jQuery, document, window, navigator));
/* Ion.RangeSlider
// css version 1.8.1
// by Denis Ineshin | ionden.com
// ===================================================================================================================*/
/* =====================================================================================================================
// RangeSlider */
.irs {
position: relative; display: block;
}
.irs-line {
position: relative; display: block;
overflow: hidden;
}
.irs-line-left, .irs-line-mid, .irs-line-right {
position: absolute; display: block;
top: 0;
}
.irs-line-left {
left: 0; width: 10%;
}
.irs-line-mid {
left: 10%; width: 80%;
}
.irs-line-right {
right: 0; width: 10%;
}
.irs-diapason {
position: absolute; display: block;
left: 0; width: 100%;
}
.irs-slider {
position: absolute; display: block;
cursor: default;
z-index: 1;
cursor: pointer;
}
.irs-slider.single {
left: 10px;
}
.irs-slider.single:before {
position: absolute; display: block; content: "";
top: -50%; left: -100%;
/* width: 300%; */ height: 200%;
background: rgba(0,0,0,0.0);
}
.irs-slider.from {
left: 100px;
}
.irs-slider.from:before {
position: absolute; display: block; content: "";
top: -50%; left: -200%;
/* width: 300%; */ height: 200%;
background: rgba(0,0,0,0.0);
}
.irs-slider.to {
left: 300px;
}
.irs-slider.to:before {
position: absolute; display: block; content: "";
top: -50%; left: 0;
/* width: 300%; */ height: 200%;
background: rgba(0,0,0,0.0);
}
.irs-slider.last {
z-index: 2;
}
.irs-min {
position: absolute; display: block;
left: 0;
cursor: default;
}
.irs-max {
position: absolute; display: block;
right: 0;
cursor: default;
}
.irs-from, .irs-to, .irs-single {
position: absolute; display: block;
top: 0; left: 0;
cursor: default;
white-space: nowrap;
}
.irs-grid {
position: absolute; display: none;
bottom: 0; left: 0;
width: 100%; height: 20px;
margin: 0 10px;
}
.irs-with-grid .irs-grid {
display: block;
}
.irs-grid-pol {
position: absolute;
top: 0; left: 0;
width: 1px; height: 8px;
background: #000;
}
.irs-grid-pol.small {
height: 4px;
}
.irs-grid-text {
position: absolute;
bottom: 0; left: 0;
width: 100px;
white-space: nowrap;
text-align: center;
font-size: 9px; line-height: 9px;
color: #000;
}
/* Ion.RangeSlider, Nice Skin
// css version 1.9.2
// © 2013-2014 Denis Ineshin | IonDen.com
// ===================================================================================================================*/
/* =====================================================================================================================
// Skin details */
.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-diapason,
.irs-slider {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAACWCAMAAAAPDwbEAAABO1BMVEUAAACKlJuMlp3Pz8/p6enPz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/X19fb29vc3Nzs7Ozt7e3v8fLw8vPz8/P09PT39/f4+Pj5+fn8/Pz9/f3+/v7/////2tr/2Nj/19fp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enm5+fp6enp6enp6enp6empsLamrrS1vMG4vsO6wcefqrGfqbGeqbCeqLCdqK+cp66apayapayZpKyYo6uWoamVoKiUn6aRm6OOmJ+Nl56OmJ+Nl56Mlp2Nl56Nl56LlJuLlJv/UlL/EBD/Dg7/DQ3/DAz/AAAc27MeAAAAY3RSTlMABgYBBEJDREZHVl6HiZmaor/X2Nvc3fL0+fr//////////////////////////9TT0tHPzszKycjGxcTDwsHAv77Bsm1nZrvA4+H///////v6+vv//////////+7t7ZGQkJHGd9kAAAACD0lEQVR4Xu3ZUU/TUBiH8X9PiwBjjBEwYMfGYCJ4GJ+BkBg1A2LiDDiMRgeEj+m3MsS1x9OyOPXGmOAFnOfXpu1Vk74XJ6d55GGAgU5xqj766o8xBIaA6EClb6PMyRgT+yPSQ+byzB95rihOZnWHAAAAAAAAAABA9OXj+SBgHz4Z6fP5+7PTkJ29TEyWZ4GrHBrnKWTOZSZW6G4k8+rtu37A3rw+fBEpOXCZxqLvN6O8jNNxbPSw5FlWxmiTTE85TcTR1zt4OwAAAAAAAAAAKVJZWNkJhsAQGAKUIo0ONDEaZbnLnSQTFUxkigfdb865vPisQi6p+Kw4SfSfAAAAAAAAAACAqYXltbXlhUcKkVFhrr5aX6r7c7U+p0BVG1t2bKtRVZDm13ftT7vr8wpQpbFjf7HTqCg4cdqxv+mksUIz3bSFzd7xcW/TFprTCk2tZb32Ud87aluvVVNoVrat1+uXetbbXlFYjJLk9l5KyksS3BByp9AZjTJ5uUojeVmm0Cxu/LkwbiwqNLNNW2j3Tk56bVtozmiMzRLbZn6gglRtdOxYp1FVoCpps/Xs+e7TVjOtKFjxTO3xk9Wl2sy/rIkAAAAAVZoqTZWmSlOlqdJU6b3h5eVwL+wq3b249i66QVfp4XVpSJWmSheo0lTp/duFcT/sKt0dXl0Nu3+t0lRpqjRVmipNlaZKAwAAAD8ALze+3v31S2cAAAAASUVORK5CYII=') /*/img/sprite-skin-nice.png*/ repeat-x;
}
.irs {
height: 40px;
}
.irs-with-grid {
height: 60px;
}
.irs-line {
height: 8px; top: 25px;
}
.irs-line-left {
height: 8px;
background-position: 0 -30px;
}
.irs-line-mid {
height: 8px;
background-position: 0 0;
}
.irs-line-right {
height: 8px;
background-position: 100% -30px;
}
.irs-diapason {
height: 8px; top: 25px;
background-position: 0 -60px;
}
.irs-slider {
width: 22px; height: 22px;
top: 17px;
background-position: 0 -90px;
}
#irs-active-slider, .irs-slider:hover {
background-position: 0 -120px;
}
.irs-min, .irs-max {
color: #999;
font-size: 10px; line-height: 1.333;
text-shadow: none;
top: 0; padding: 1px 3px;
background: rgba(0,0,0,0.1);
border-radius: 3px;
}
.lt-ie9 .irs-min, .lt-ie9 .irs-max {
background: #ccc;
}
.irs-from, .irs-to, .irs-single {
color: #fff;
font-size: 10px; line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background: rgba(0,0,0,0.3);
border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
background: #999;
}
.irs-grid-pol {
background: #99a4ac;
}
.irs-grid-text {
color: #99a4ac;
}
.irs-disabled {
}