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] + "%"; } },