diff --git a/ui/ui.slider.js b/ui/ui.slider.js index b304843bf..ff7d1ce0c 100644 --- a/ui/ui.slider.js +++ b/ui/ui.slider.js @@ -46,13 +46,15 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { this.range .appendTo(this.element) - .addClass("ui-slider-range" - + " ui-widget-header"); + .addClass("ui-slider-range"); - (o.range == "min") && (this.orientation == "horizontal") && this.range.css({ left : 0 }); - (o.range == "max") && (this.orientation == "horizontal") && this.range.css({ right : 0 }); - (o.range == "min") && (this.orientation == "vertical") && this.range.css({ bottom : 0 }); - (o.range == "max") && (this.orientation == "vertical") && this.range.css({ top : 0 }); + if (o.range == "min" || o.range == "max") { + this.range.addClass("ui-slider-range-" + o.range); + } + + // note: this isn't the most fittingly semantic framework class for this element, + // but worked best visually with a variety of themes + this.range.addClass("ui-widget-header"); } @@ -464,10 +466,10 @@ $.widget("ui.slider", $.extend({}, $.ui.mouse, { var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%'; this.handle.stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate); - (oRange == "min") && (this.orientation == "horizontal") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ left: 0, width: valPercent + '%' }, o.animate); - (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ left: valPercent + '%', width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); - (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ top: (100 - valPercent) + '%', height: valPercent + '%' }, o.animate); - (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ bottom: valPercent + '%', height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); + (oRange == "min") && (this.orientation == "horizontal") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ width: valPercent + '%' }, o.animate); + (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); + (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate); + (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate }); } },