diff --git a/css/ion.rangeSlider.css b/css/ion.rangeSlider.css
index dd56bef..e639649 100644
--- a/css/ion.rangeSlider.css
+++ b/css/ion.rangeSlider.css
@@ -42,6 +42,9 @@
position: absolute; display: block;
top: 0; left: 0;
}
+ .irs-bar-edge.reverse {
+ left:auto; right:0;
+ }
.irs-shadow {
position: absolute; display: none;
diff --git a/css/ion.rangeSlider.skinHTML5.css b/css/ion.rangeSlider.skinHTML5.css
index 740d429..2b206cb 100644
--- a/css/ion.rangeSlider.skinHTML5.css
+++ b/css/ion.rangeSlider.skinHTML5.css
@@ -48,6 +48,11 @@
border-radius: 16px 0 0 16px;
-moz-border-radius: 16px 0 0 16px;
}
+ .irs-bar-edge.reverse {
+ border-width: 1px 1px 1px 0;
+ border-radius:0 16px 16px 0;
+ -moz-border-radius:0 16px 16px 0;
+ }
.irs-shadow {
height: 2px; top: 38px;
diff --git a/js/ion.rangeSlider.js b/js/ion.rangeSlider.js
index 10e81b9..0777ea6 100644
--- a/js/ion.rangeSlider.js
+++ b/js/ion.rangeSlider.js
@@ -1,4 +1,4 @@
-// Ion.RangeSlider
+// Ion.RangeSlider
// version 2.1.1 Build: 347
// © Denis Ineshin, 2015
// https://github.com/IonDen
@@ -311,6 +311,8 @@
disable: false,
+ reverse: false,
+
onStart: null,
onChange: null,
onFinish: null,
@@ -369,7 +371,8 @@
input_values_separator: $inp.data("inputValuesSeparator"),
- disable: $inp.data("disable")
+ disable: $inp.data("disable"),
+ reverse: $inp.data("reverse")
};
config_from_data.values = config_from_data.values && config_from_data.values.split(",");
@@ -488,8 +491,15 @@
this.$cache.cont.html(base_html);
this.$cache.rs = this.$cache.cont.find(".irs");
- this.$cache.min = this.$cache.cont.find(".irs-min");
- this.$cache.max = this.$cache.cont.find(".irs-max");
+
+ if (this.options.reverse === true) {
+ this.$cache.min = this.$cache.cont.find(".irs-max");
+ this.$cache.max = this.$cache.cont.find(".irs-min");
+ }else{
+ this.$cache.min = this.$cache.cont.find(".irs-min");
+ this.$cache.max = this.$cache.cont.find(".irs-max");
+ }
+
this.$cache.from = this.$cache.cont.find(".irs-from");
this.$cache.to = this.$cache.cont.find(".irs-to");
this.$cache.single = this.$cache.cont.find(".irs-single");
@@ -499,7 +509,7 @@
if (this.options.type === "single") {
this.$cache.cont.append(single_html);
- this.$cache.edge = this.$cache.cont.find(".irs-bar-edge");
+ this.$cache.edge = this.$cache.cont.find(".irs-bar-edge").toggleClass('reverse', this.options.reverse);
this.$cache.s_single = this.$cache.cont.find(".single");
this.$cache.from[0].style.visibility = "hidden";
this.$cache.to[0].style.visibility = "hidden";
@@ -1124,7 +1134,7 @@
this.coords.x_pointer = this.coords.w_rs;
}
- this.coords.p_pointer = this.toFixed(this.coords.x_pointer / this.coords.w_rs * 100);
+ this.coords.p_pointer = this.toFixed(this.convertToReversePercent(this.coords.x_pointer / this.coords.w_rs * 100));
},
convertToRealPercent: function (fake) {
@@ -1300,13 +1310,16 @@
this.drawLabels();
- this.$cache.bar[0].style.left = this.coords.p_bar_x + "%";
+ this.$cache.bar[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_bar_x) - this.coords.p_bar_w + "%"
+ : this.coords.p_bar_x + "%";
this.$cache.bar[0].style.width = this.coords.p_bar_w + "%";
if (this.options.type === "single") {
- this.$cache.s_single[0].style.left = this.coords.p_single_fake + "%";
+ this.$cache.s_single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_single_fake) - this.coords.p_handle + "%"
+ : this.coords.p_single_fake + "%";
- this.$cache.single[0].style.left = this.labels.p_single_left + "%";
+ this.$cache.single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_single_left) - this.labels.p_single_fake + "%"
+ : this.labels.p_single_left + "%";
if (this.options.values.length) {
this.$cache.input.prop("value", this.result.from_value);
@@ -1315,17 +1328,21 @@
}
this.$cache.input.data("from", this.result.from);
} else {
- this.$cache.s_from[0].style.left = this.coords.p_from_fake + "%";
- this.$cache.s_to[0].style.left = this.coords.p_to_fake + "%";
+ this.$cache.s_from[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_from_fake) - this.coords.p_handle + "%"
+ : this.coords.p_from_fake + "%";
+ this.$cache.s_to[0].style.left = this.options.reverse ? this.convertToReversePercent(this.coords.p_to_fake) - this.coords.p_handle + "%"
+ : this.coords.p_to_fake + "%";
if (this.old_from !== this.result.from || this.force_redraw) {
- this.$cache.from[0].style.left = this.labels.p_from_left + "%";
+ this.$cache.from[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_from_left) - this.labels.p_from_fake + "%"
+ : this.labels.p_from_left + "%";
}
if (this.old_to !== this.result.to || this.force_redraw) {
- this.$cache.to[0].style.left = this.labels.p_to_left + "%";
+ this.$cache.to[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_to_left) - this.labels.p_to_fake + "%"
+ : this.labels.p_to_left + "%";
}
-
- this.$cache.single[0].style.left = this.labels.p_single_left + "%";
+ this.$cache.single[0].style.left = this.options.reverse ? this.convertToReversePercent(this.labels.p_single_left) - this.labels.p_single_fake + "%"
+ : this.labels.p_single_left + "%";
if (this.options.values.length) {
this.$cache.input.prop("value", this.result.from_value + this.options.input_values_separator + this.result.to_value);
@@ -1511,6 +1528,10 @@
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
from_min = from_min + (this.coords.p_handle / 2);
+ if (this.options.reverse === true) {
+ from_min = this.convertToReversePercent(from_min) - from_max;
+ }
+
c.shad_single[0].style.display = "block";
c.shad_single[0].style.left = from_min + "%";
c.shad_single[0].style.width = from_max + "%";
@@ -1525,6 +1546,10 @@
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
from_min = from_min + (this.coords.p_handle / 2);
+ if (this.options.reverse === true) {
+ from_min = this.convertToReversePercent(from_min) - from_max;
+ }
+
c.shad_from[0].style.display = "block";
c.shad_from[0].style.left = from_min + "%";
c.shad_from[0].style.width = from_max + "%";
@@ -1539,6 +1564,10 @@
to_max = this.toFixed(to_max - (this.coords.p_handle / 100 * to_max));
to_min = to_min + (this.coords.p_handle / 2);
+ if (this.options.reverse === true) {
+ to_min = this.convertToReversePercent(to_min) - to_max;
+ }
+
c.shad_to[0].style.display = "block";
c.shad_to[0].style.left = to_min + "%";
c.shad_to[0].style.width = to_max + "%";
@@ -1611,6 +1640,16 @@
return this.toFixed(percent);
},
+ /**
+ * Convert percent to its reverse
+ *
+ * @param value {number} X in percent
+ * @returns {number} X in reverse percent
+ */
+ convertToReversePercent: function (value) {
+ return this.options.reverse ? this.toFixed(100 - value) : value;
+ },
+
/**
* Convert percent to real values
*
@@ -2087,10 +2126,10 @@
small_w = this.toFixed(big_w - (small_p * z));
- html += '';
+ html += '';
}
- html += '';
+ html += '';
result = this.convertToValue(big_w);
if (o.values.length) {
@@ -2099,7 +2138,7 @@
result = this._prettify(result);
}
- html += '' + result + '';
+ html += '' + result + '';
}
this.coords.big_num = Math.ceil(big_num + 1);
@@ -2156,7 +2195,8 @@
for (i = 0; i < num; i++) {
label = this.$cache.grid_labels[i][0];
- label.style.marginLeft = -this.coords.big_x[i] + "%";
+ label.style.marginLeft = this.options.reverse ? this.coords.big_x[i] - this.coords.big_p[i] + "%"
+ : -this.coords.big_x[i] + "%";
}
},