adaptlearning · tomgreenfield · Nov 27, 2017 · Dec 19, 2016 · Dec 19, 2016 · Dec 19, 2016
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 To respond to the question, the learner positions a slider along a scale. Upon submission, feedback is provided via the [**Tutor** extension](https://github.com/adaptlearning/adapt-contrib-tutor), if installed. Feedback can be provided for correct, incorrect and partially correct answers. The number of attempts allowed may be configured.
 
-The component uses [rangeslider.js (v2.1.1)](http://rangeslider.js.org/), a library that provides a polyfill for browsers that do not have support for the 'range' input type. rangeslider.js carries the MIT license compatible with Adapt. 
+The component uses [rangeslider.js (v2.3.1)](http://rangeslider.js.org/), a library that provides a polyfill for browsers that do not have support for the 'range' input type. rangeslider.js carries the MIT license compatible with Adapt. 
 
 [Visit the **Slider** wiki](https://github.com/adaptlearning/adapt-contrib-slider/wiki) for more information about its functionality and for explanations of key properties.
 

diff --git a/js/adapt-contrib-slider.js b/js/adapt-contrib-slider.js
@@ -36,7 +36,6 @@ define([
         setupRangeslider: function () {
             this.$sliderScaleMarker = this.$('.slider-scale-marker');
             this.$slider = this.$('input[type="range"]');
-
             if(this.model.has('_scaleStep')) {
                 this.$slider.attr({"step": this.model.get('_scaleStep')});
             }
@@ -56,20 +55,6 @@ define([
             if (this.oldValue === value) {
                return;
             }
-            if(this.model.get('_marginDir') == 'right'){
-                if(this.tempValue && (this.model.get('_userAnswer') == undefined)){
-                    value = this.model.get('_items').length - value + 1;
-                    this.tempValue = false;
-                    var tempPixels = this.mapIndexToPixels(value);
-                    var rangeSliderWidth = this.$('.rangeslider').width();
-                    var handleLeft = parseInt(this.$('.rangeslider__handle').css('left'));
-                    var sliderWidth = this.$('.rangeslider__fill').width();
-                    handleLeft = rangeSliderWidth - handleLeft -this.$('.rangeslider__handle').width();
-                    sliderWidth = rangeSliderWidth - sliderWidth;
-                    this.$('.rangeslider__handle').css('left',handleLeft);
-                    this.$('.rangeslider__fill').width(sliderWidth);
-                }
-            }
             var itemIndex = this.getIndexFromValue(value);
             var pixels = this.mapIndexToPixels(itemIndex);
             this.selectItem(itemIndex, false);
@@ -397,12 +382,7 @@ define([
                 for (var j = 0, len = this.model.get('_items').length; j < len; j++) {
                     var $number = $numbers.eq(j);
                     var newLeft = Math.round($number.data('normalisedPosition') * scaleWidth);
-                    if($('html').hasClass('ie9') && this.model.get('_marginDir') === 'right') {
-                        $number.css({right: newLeft});
-                    }
-                    else{
-                        $number.css({left: newLeft});
-                    }
+                    $number.css({left: newLeft});
                 }
             }
         },
@@ -421,13 +401,6 @@ define([
             this.$('.slider-handle').css({left: left + 'px'});
             this.$('.slider-scale-marker').css({left: left + 'px'});
             this.$('.slider-bar').width(left);
-            //updated position of rangeslider bar on window resize for RTL 
-            if (this.model.get('_marginDir') == 'right') {
-                _.delay(function() {
-                    this.$('.rangeslider__handle').css('left', left);
-                    this.$('.rangeslider__fill').css('width', left + (this.$('.rangeslider__handle').width() / 2));
-                }, 300, this);
-            }
         },
 
         onScreenSizeChanged: function() {

diff --git a/less/rangeslider.less b/less/rangeslider.less
@@ -23,6 +23,15 @@
   width: 20px;
   min-height: 150px;
   max-height: 100%;
+  height: 100%;
+}
+
+.rangeslider__rtl {
+  direction: rtl;
+}
+
+.rangeslider__ttb {
+  top: 0;
 }
 
 .rangeslider--disabled {
@@ -85,7 +94,7 @@
   -webkit-border-radius: 50%;
   border-radius: 50%;
 }
-.rangeslider__handle:active {
+.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
@@ -108,4 +117,4 @@ input[type="range"]:focus + .rangeslider .rangeslider__handle {
   -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
   -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
   box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
-}
+}
diff --git a/less/slider.less b/less/slider.less
@@ -147,14 +147,6 @@
         }
         .rangeslider {
             background-color: @background-color;
-            .dir-rtl & {
-                transform: rotateY(180deg);
-                -webkit-transform: rotateY(180deg);
-                -ms-transform: rotateY(180deg);
-                /*IE9 does not support 3D transform*/
-                -moz-transform: rotateY(180deg);
-                -o-transform: rotateY(180deg);
-            }
         }
         .rangeslider--disabled {
             filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

diff --git a/libraries/rangeslider.js b/libraries/rangeslider.js
@@ -1,4 +1,4 @@
-/*! rangeslider.js - v2.1.1 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v2.3.1 | (c) 2017 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 (function(factory) {
     'use strict';
 
@@ -39,8 +39,11 @@
             orientation: 'horizontal',
             rangeClass: 'rangeslider',
             disabledClass: 'rangeslider--disabled',
+            activeClass: 'rangeslider--active',
             horizontalClass: 'rangeslider--horizontal',
             verticalClass: 'rangeslider--vertical',
+            dirRTLClass:'rangeslider__rtl',
+            dirTTBClass:'rangeslider__ttb',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ['mousedown', 'touchstart', 'pointerdown'],
@@ -51,14 +54,14 @@
             orientation: {
                 horizontal: {
                     dimension: 'width',
-                    direction: 'left',
-                    directionStyle: 'left',
+                    direction: { ltr: 'left', rtl: 'right'},
+                    directionStyle: { ltr: 'left', rtl: 'right' },
                     coordinate: 'x'
                 },
                 vertical: {
                     dimension: 'height',
-                    direction: 'top',
-                    directionStyle: 'bottom',
+                    direction: { btt:'top', ttb:'bottom' },
+                    directionStyle: { btt:'bottom', ttb:'top' },
                     coordinate: 'y'
                 }
             }
@@ -208,6 +211,21 @@
         return str.charAt(0).toUpperCase() + str.substr(1);
     }
 
+    /**
+     * return direction rtl,ltr,btt,ttb
+     * @param {String} element
+     * @param {String} orientation
+     */
+    function getDirection(element, orientation){
+        var direction = element[0].getAttribute('data-direction') || (orientation === 'vertical' ? 'btt' : 'ltr');
+
+        if (constants.orientation[orientation].direction[direction]) {
+            return direction;
+        } else {
+            return orientation === 'vertical' ? 'btt' : 'ltr';
+        }
+    }
+
     /**
      * Plugin
      * @param {String} element
@@ -220,12 +238,13 @@
         this.options            = $.extend( {}, defaults, options );
         this.polyfill           = this.options.polyfill;
         this.orientation        = this.$element[0].getAttribute('data-orientation') || this.options.orientation;
+        this.dir                = getDirection(this.$element,this.orientation);
         this.onInit             = this.options.onInit;
         this.onSlide            = this.options.onSlide;
         this.onSlideEnd         = this.options.onSlideEnd;
         this.DIMENSION          = constants.orientation[this.orientation].dimension;
-        this.DIRECTION          = constants.orientation[this.orientation].direction;
-        this.DIRECTION_STYLE    = constants.orientation[this.orientation].directionStyle;
+        this.DIRECTION          = constants.orientation[this.orientation].direction[this.dir];
+        this.DIRECTION_STYLE    = constants.orientation[this.orientation].directionStyle[this.dir];
         this.COORDINATE         = constants.orientation[this.orientation].coordinate;
 
         // Plugin should only be used as a polyfill
@@ -239,9 +258,9 @@
         this.moveEvent  = this.options.moveEvent.join('.' + this.identifier + ' ') + '.' + this.identifier;
         this.endEvent   = this.options.endEvent.join('.' + this.identifier + ' ') + '.' + this.identifier;
         this.toFixed    = (this.step + '').replace('.', '').length - 1;
-        this.$fill      = $('<div class="' + this.options.fillClass + '" />');
+        this.$fill      = $('<div class="' + this.options.fillClass +' '+(this.dir==='ttb'&&this.orientation==='vertical'? this.options.dirTTBClass: '') +'" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
-        this.$range     = $('<div class="' + this.options.rangeClass + ' ' + this.options[this.orientation + 'Class'] + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle);
+        this.$range     = $('<div class="' + this.options.rangeClass +' ' +(this.dir==='rtl'&&this.orientation==='horizontal'? this.options.dirRTLClass: '') + ' ' + this.options[this.orientation + 'Class'] + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle);
 
         // visually hide the input
         this.$element.css({
@@ -315,9 +334,14 @@
     };
 
     Plugin.prototype.handleDown = function(e) {
+        e.preventDefault();
         this.$document.on(this.moveEvent, this.handleMove);
         this.$document.on(this.endEvent, this.handleEnd);
 
+        // add active class because Firefox is ignoring
+        // the handle:active pseudo selector because of `e.preventDefault();`
+        this.$range.addClass(this.options.activeClass);
+
         // If we click on the handle don't set the new position
         if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) {
             return;
@@ -347,6 +371,8 @@
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        this.$range.removeClass(this.options.activeClass);
+
         // Ok we're done fire the change event
         this.$element.trigger('change', { origin: this.identifier });
 
@@ -402,20 +428,21 @@
             rangePos = this.$range[0].getBoundingClientRect()[this.DIRECTION],
             pageCoordinate = 0;
 
-        if (typeof e['page' + ucCoordinate] !== 'undefined') {
-            pageCoordinate = e['client' + ucCoordinate];
-        }
-        else if (typeof e.originalEvent['client' + ucCoordinate] !== 'undefined') {
+        if (typeof e.originalEvent['client' + ucCoordinate] !== 'undefined') {
             pageCoordinate = e.originalEvent['client' + ucCoordinate];
         }
-        else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0]['client' + ucCoordinate] !== 'undefined') {
+        else if (
+          e.originalEvent.touches &&
+          e.originalEvent.touches[0] &&
+          typeof e.originalEvent.touches[0]['client' + ucCoordinate] !== 'undefined'
+        ) {
             pageCoordinate = e.originalEvent.touches[0]['client' + ucCoordinate];
         }
         else if(e.currentPoint && typeof e.currentPoint[this.COORDINATE] !== 'undefined') {
             pageCoordinate = e.currentPoint[this.COORDINATE];
         }
 
-        return pageCoordinate - rangePos;
+        return (this.dir === 'rtl' || this.dir === 'ttb') ? rangePos - pageCoordinate : pageCoordinate - rangePos;
     };
 
     Plugin.prototype.getPositionFromValue = function(value) {

diff --git a/templates/slider.hbs b/templates/slider.hbs
@@ -22,7 +22,7 @@
 
             <div class="slider-background">
                 <div class="slider-item component-item {{#unless _isEnabled}}{{#if _isCorrect}}correct{{else}}incorrect{{/if}}{{/unless}}">
-                  <input type="range" name="" value="{{#if _userAnswer}}{{_userAnswer}}{{else}}{{_scaleStart}}{{/if}}" min="{{_scaleStart}}" max="{{_scaleEnd}}" {{#unless _isEnabled}} disabled{{/unless}}>
+                  <input type="range" name="" value="{{#if _userAnswer}}{{_userAnswer}}{{else}}{{_scaleStart}}{{/if}}" min="{{_scaleStart}}" max="{{_scaleEnd}}" data-rangeslider data-direction="{{#equals _marginDir "right"}}rtl{{/equals}}" {{#unless _isEnabled}} disabled{{/unless}}>
                 </div>
             </div>
         </div>