diff --git a/jquery.nouislider.css b/jquery.nouislider.css index 99c9cb62..e499b211 100644 --- a/jquery.nouislider.css +++ b/jquery.nouislider.css @@ -18,7 +18,7 @@ } /* Main slider bar; - * Use outline instead of border to keep absolute + * Use box-shadow instead of border to keep absolute * positioning unrelated to the styling. */ .noUi-base { @@ -26,7 +26,7 @@ margin: 1px; height: 38px; position: relative; - outline: 1px solid #BFBFBF; + box-shadow: 0 0 0 1px #BFBFBF; } /* Handles + active state; @@ -71,7 +71,7 @@ bottom: 0; border-radius: inherit; } - .noUi-origin-upper { + .noUi-origin + .noUi-origin { background: inherit !important; } .noUi-z-index { diff --git a/jquery.nouislider.js b/jquery.nouislider.js index f858e6f5..3e2900f3 100644 --- a/jquery.nouislider.js +++ b/jquery.nouislider.js @@ -434,7 +434,7 @@ q.to = filter ( q.to, 0 ); // Reverse the API for RTL sliders. - if ( o.direction ) { + if ( o.direction && q.to[1].length ) { q.to.reverse(); } @@ -718,8 +718,10 @@ // add the proper events to them or create new input fields, // and add them as data to the handle so they can be kept // in sync with the slider value. - $.each( serialization.to[i], function(){ - elements = elements.concat( storeElement( handle, this, i ) ); + $.each( serialization.to[i], function( index ){ + elements = elements.concat( + storeElement( handle, serialization.to[i][index], i ) + ); }); return { @@ -902,15 +904,16 @@ // other function. Base is the internal main 'bar'. var target = $(this).addClass(clsList[6]), i, handle, base = $('
').appendTo(target), + d = options.direction, classes = { base: [ clsList[0] ] ,origin: [ - [ clsList[1], clsList[1] + clsList[7] ] - ,[ clsList[1], clsList[1] + clsList[8] ] + [ clsList[1], clsList[1] + clsList[d?8:7] ] + ,[ clsList[1], clsList[1] + clsList[d?7:8] ] ] ,handle: [ - [ clsList[2], clsList[2] + clsList[7] ] - ,[ clsList[2], clsList[2] + clsList[8] ] + [ clsList[2], clsList[2] + clsList[d?8:7] ] + ,[ clsList[2], clsList[2] + clsList[d?7:8] ] ] }; @@ -920,6 +923,15 @@ // renaming and provide a minor compression benefit. if( options.connect ) { + if ( d ) { + + if ( options.connect === 'lower' ) { + options.connect = 'upper'; + } else if ( options.connect === 'upper' ) { + options.connect = 'lower'; + } + } + if( options.connect === 'lower' ){ // Add some styling classes to the base; classes.base.push(clsList[9], clsList[9] + clsList[7]); @@ -953,10 +965,6 @@ classes.base.push(clsList[11]); } - if ( options.direction ) { - target.addClass(clsList[16]); - } - // Merge base classes with default, // and store relevant data on the base element. base.addClass( classes.base.join(' ') ).data({ @@ -968,6 +976,10 @@ // Make data accessible in functions throughout the plugin. target.data('base', base); + if ( d ) { + target.addClass(clsList[16]); + } + for (i = 0; i < options.handles; i++ ) { handle = $('