feat(slider): reversed

components/slider/demo/js-demo/index.html

@@ -20,6 +20,15 @@
       <script src="../../src/index.js"></script>
       <div style="text-align: center">basic slider</div>
       <o-slider min="0" max="10" value="2" id="single-range-demo"></o-slider>
+      <div style="text-align: center">reversed slider</div>
+      <o-slider
+        min="0"
+        max="10"
+        value="5"
+        reversed
+        id="single-reversed-range-demo"
+      ></o-slider>
+
       <div style="text-align: center">single slider with tool-tip</div>
       <o-slider
         min="0"

components/slider/src/index.js

@@ -3114,6 +3114,7 @@ var OSlider = /** @class */ (function (_super) {
         var host = this.shadowRoot.host;
         this.props.orient === 'vertical' &&
             (host.style.transform = 'rotate(-90deg)');
+        this.props.reversed && (host.style.transform = 'rotate(180deg)');
     };
     OSlider.prototype.beforeUpdate = function () {
         if (this.__$value1 > this.__$value2 && this.props.range === 'double') {
@@ -3131,7 +3132,6 @@ var OSlider = /** @class */ (function (_super) {
             'is-vertical': props.orient === 'vertical',
             'is-round': props.shape === 'round',
             'is-disabled': props.disabled,
-            'is-reversed': props.reversed,
         });
         return (omi_1.h("div", __assign({}, cls, { ref: function (e) {
                 _this.rootNode = e;
@@ -3173,6 +3173,7 @@ var OSlider = /** @class */ (function (_super) {
         shape: 'round',
         tooltip: false,
         disabled: false,
+        reversed: false,
     };
     OSlider.propTypes = {
         min: Number,
@@ -3185,6 +3186,7 @@ var OSlider = /** @class */ (function (_super) {
         shape: String,
         tooltip: Boolean,
         disabled: Boolean,
+        reversed: Boolean,
     };
     OSlider.css = css;
     OSlider = __decorate([

components/slider/src/index.tsx

@@ -14,6 +14,7 @@ interface Props {
   shape: 'square' | 'round'
   tooltip?: boolean
   disabled?: boolean
+  reversed?: boolean
 }
 
 @tag('o-slider')
@@ -30,6 +31,7 @@ export default class OSlider extends WeElement<Props> {
     shape: 'round',
     tooltip: false,
     disabled: false,
+    reversed: false,
   }
 
   static propTypes = {
@@ -43,6 +45,7 @@ export default class OSlider extends WeElement<Props> {
     shape: String,
     tooltip: Boolean,
     disabled: Boolean,
+    reversed: Boolean,
   }
 
   static css = css
@@ -80,6 +83,7 @@ export default class OSlider extends WeElement<Props> {
     let host = this.shadowRoot.host as HTMLElement
     this.props.orient === 'vertical' &&
       (host.style.transform = 'rotate(-90deg)')
+    this.props.reversed && (host.style.transform = 'rotate(180deg)')
   }
 
   _onGetValue = () => {
@@ -128,7 +132,6 @@ export default class OSlider extends WeElement<Props> {
       this.fire('input', [this.__$value1, this.__$value2])
     }
     this.fillColor(this.lowerColor, this.upperColor)
-
     this.update()
   }
 
@@ -171,7 +174,6 @@ export default class OSlider extends WeElement<Props> {
       'is-vertical': props.orient === 'vertical',
       'is-round': props.shape === 'round',
       'is-disabled': props.disabled,
-      'is-reversed': props.reversed,
     })
 
     return (