@wavemaker/app-rn-runtime 11.7.0-rc.161 → 11.7.0-rc.162

app-rn-runtime/components/input/slider/slider.component.js

@@ -1,38 +1,122 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { View, Text, TouchableOpacity, Animated } from 'react-native';
-import { debounce, isNumber, isNil } from 'lodash';
+import { View, Text, TouchableOpacity, Animated, Dimensions } from 'react-native';
+import { debounce, isNumber, isNil, isArray, isString, last } from 'lodash';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
-import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmTooltip from '@wavemaker/app-rn-runtime/components/basic/tooltip/tooltip.component';
 import WmSliderProps from './slider.props';
 import { DEFAULT_CLASS } from './slider.styles';
-import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
-export class WmSliderState extends BaseComponentState {
-  constructor() {
-    super(...arguments);
+import { isDefined, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { BaseDatasetComponent, BaseDatasetState } from '../basedataset/basedataset.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+const SCREEN_WIDTH = Dimensions.get("screen").width;
+export class WmSliderState extends BaseDatasetState {
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "track", void 0);
   }
 }
-export default class WmSlider extends BaseComponent {
+class Scale {
+  static getInstanceWithTicks(ticks) {
+    const scale = new Scale();
+    scale.ticks = [...ticks];
+    return scale;
+  }
+  constructor() {
+    _defineProperty(this, "ticks", []);
+  }
+  getTickIndex(value) {
+    if (isString(value)) {
+      value = parseInt(value);
+    }
+    let markIndex = 0;
+    const i = this.ticks.findIndex((v, i) => v.markValue >= value);
+    if (i === 0) {
+      markIndex = 0;
+    } else if (i < 0 || i === this.ticks.length - 1) {
+      markIndex = this.ticks.length - 1;
+    } else if (value - this.ticks[i - 1].markValue < (this.ticks[i].markValue - this.ticks[i - 1].markValue) / 2) {
+      markIndex = i - 1;
+    } else {
+      markIndex = i;
+    }
+    return markIndex;
+  }
+  getMinTick() {
+    return this.ticks[0];
+  }
+  getMaxTick() {
+    return last(this.ticks) || {};
+  }
+  getTick(value) {
+    return this.ticks[this.getTickIndex(value)];
+  }
+  clamp(value) {
+    const index = this.getTickIndex(value);
+    return this.ticks[index].markValue;
+  }
+  transform(min, max) {
+    var _this$ticks$, _last;
+    const thisMin = (this.ticks ? (_this$ticks$ = this.ticks[0]) === null || _this$ticks$ === void 0 ? void 0 : _this$ticks$.markValue : 0) || 0;
+    const thisMax = (_last = last(this.ticks)) === null || _last === void 0 ? void 0 : _last.markValue;
+    const factor = thisMax ? (max - min) / (thisMax - thisMin) : 1;
+    const ticks = [];
+    this.ticks.forEach((v, i) => {
+      const markValue = Math.round(min + (v.markValue - this.ticks[0].markValue) * factor);
+      ticks[i] = {
+        displayfield: '' + markValue,
+        markValue: markValue,
+        datafield: markValue,
+        dataitem: markValue
+      };
+    });
+    return Scale.getInstanceWithTicks(ticks);
+  }
+}
+export default class WmSlider extends BaseDatasetComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmSliderProps());
     _defineProperty(this, "valueBeforeSlide", 0);
     _defineProperty(this, "position", new Animated.Value(0));
+    _defineProperty(this, "highPosition", new Animated.Value(0));
     _defineProperty(this, "trackGesture", Gesture.Pan());
     _defineProperty(this, "knobGesture", Gesture.Pan());
-    _defineProperty(this, "onChange", debounce(value => {
-      if (this.state.props.datavalue !== value) {
-        this.updateState({
-          props: {
-            datavalue: value
-          }
-        });
-        this.props.onFieldChange && this.props.onFieldChange('datavalue', value, this.state.props.datavalue);
+    _defineProperty(this, "highKnobGesture", Gesture.Pan());
+    _defineProperty(this, "scale", null);
+    _defineProperty(this, "uiScale", null);
+    _defineProperty(this, "onSliderChange", debounce((value, gestureType) => {
+      const dataValue = this.getScaledDataValue();
+      const isRangeSlider = this.state.props.range && isArray(dataValue);
+
+      // * thumb value for low or high
+      const oldThumbValue = gestureType === 'lowThumb' ? dataValue || (dataValue === null || dataValue === void 0 ? void 0 : dataValue[0]) : dataValue === null || dataValue === void 0 ? void 0 : dataValue[1];
+      let thumbDataValue = isRangeSlider ? [dataValue[0], dataValue[1]] : [value];
+      if (isRangeSlider) {
+        if (gestureType === 'lowThumb') {
+          const valueLowerThanHighThumb = value > (dataValue === null || dataValue === void 0 ? void 0 : dataValue[1]) ? dataValue === null || dataValue === void 0 ? void 0 : dataValue[1] : value;
+          thumbDataValue = [valueLowerThanHighThumb, dataValue[1]];
+        } else if (gestureType === 'highThumb') {
+          const valueGreaterThanLowThumb = value < dataValue[0] ? dataValue === null || dataValue === void 0 ? void 0 : dataValue[0] : value;
+          thumbDataValue = [dataValue[0], valueGreaterThanLowThumb];
+        } else if (dataValue[1] && value > dataValue[1]) {
+          thumbDataValue = [dataValue[0], value];
+        } else {
+          thumbDataValue = [value, dataValue[1]];
+        }
       }
+
+      // * new thumb value is different from old value
+      const dataset = thumbDataValue.map(v => this.scale.getTick(v).datafield);
+      this.updateState({
+        props: {
+          datavalue: dataset.length > 1 ? dataset : dataset[0]
+        }
+      });
+      this.props.onFieldChange && this.props.onFieldChange('datavalue', thumbDataValue, oldThumbValue);
     }, 200));
     _defineProperty(this, "onLayoutChange", e => {
       const layout = e.nativeEvent.layout;
@@ -43,83 +127,285 @@ export default class WmSlider extends BaseComponent {
           width: layout.width,
           height: layout.height
         }
-      }, () => this.computePosition(this.state.props.datavalue));
+      }, () => {
+        this.initScale();
+        this.computePosition(this.getScaledDataValue()[0], 'track');
+      });
     });
-    this.configureGesture(this.trackGesture);
-    this.configureGesture(this.knobGesture);
+    this.initScale();
+    this.configureGesture(this.trackGesture, 'track');
+    this.configureGesture(this.knobGesture, 'lowThumb');
+    this.configureGesture(this.highKnobGesture, 'highThumb');
   }
   getValueFromGesture(positionX) {
-    if (this.state.track) {
-      const factor = (positionX - this.state.track.left) / this.state.track.width;
-      const props = this.state.props;
-      const step = props.step || (props.maxvalue - props.minvalue) / 100;
-      let value = Math.round((factor * props.maxvalue + props.minvalue) / step) * step;
-      return Math.max(Math.min(props.maxvalue, value), props.minvalue);
-    }
-    return 0;
+    var _this$scale;
+    return ((_this$scale = this.scale) === null || _this$scale === void 0 ? void 0 : _this$scale.ticks[this.uiScale.getTickIndex(positionX)].markValue) || 0;
   }
-  configureGesture(gesture) {
+  getPositionFromValue(value) {
+    var _this$uiScale;
+    return (_this$uiScale = this.uiScale) === null || _this$uiScale === void 0 || (_this$uiScale = _this$uiScale.ticks[this.scale.getTickIndex(value)]) === null || _this$uiScale === void 0 ? void 0 : _this$uiScale.markValue;
+  }
+  configureGesture(gesture, gestureType) {
     gesture.maxPointers(1).minDistance(0).onChange(e => {
       const value = this.getValueFromGesture(e.absoluteX);
-      this.computePosition(value);
+      this.computePosition(value, gestureType);
       this.forceUpdate();
     }).onEnd(e => {
       if (this.state.track) {
         const value = this.getValueFromGesture(e.absoluteX);
-        this.onChange(value);
+        this.onSliderChange(value, gestureType);
         this.forceUpdate();
       }
     });
   }
+  getScaledDataValue() {
+    let dataValue = this.state.props.datavalue || this.getDataValue();
+    if (dataValue && this.scale) {
+      dataValue = isArray(dataValue) ? dataValue : [dataValue];
+      return dataValue.map(d => {
+        var _this$scale2;
+        return (_this$scale2 = this.scale) === null || _this$scale2 === void 0 || (_this$scale2 = _this$scale2.ticks.find(t => t.datafield === d)) === null || _this$scale2 === void 0 ? void 0 : _this$scale2.markValue;
+      });
+    }
+    return dataValue;
+  }
   getDataValue() {
+    let dataValue = this.props.datavalue;
     if (isNil(this.props.datavalue)) {
-      return this.state.props.minvalue + (this.state.props.maxvalue - this.state.props.minvalue) / 2;
+      var _this$scale$ticks, _this$scale$ticks$mid;
+      const mid = Math.floor(this.scale.ticks.length / 2);
+      return mid > 0 ? [((_this$scale$ticks = this.scale.ticks[mid - 1]) === null || _this$scale$ticks === void 0 ? void 0 : _this$scale$ticks.datafield) || 0, ((_this$scale$ticks$mid = this.scale.ticks[mid]) === null || _this$scale$ticks$mid === void 0 ? void 0 : _this$scale$ticks$mid.datafield) || 100] : [];
+    }
+    dataValue = isArray(dataValue) ? dataValue : [dataValue];
+    return dataValue.map(d => {
+      var _this$scale$getTick;
+      return (_this$scale$getTick = this.scale.getTick(d)) === null || _this$scale$getTick === void 0 ? void 0 : _this$scale$getTick.datafield;
+    });
+  }
+  initNumericSlider() {
+    const dataset = [];
+    const minValue = this.state.props.minvalue;
+    const maxValue = this.state.props.maxvalue;
+    const step = this.state.props.step;
+    if (isDefined(minValue) && isDefined(maxValue) && isDefined(step)) {
+      let nextMark = minValue;
+      while (nextMark <= maxValue) {
+        dataset.push(nextMark);
+        nextMark += step || 1;
+      }
+      this.updateState({
+        props: {
+          dataset: dataset
+        }
+      });
     }
-    return Math.min(Math.max(this.props.datavalue, this.state.props.minvalue), this.state.props.maxvalue);
   }
   onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
     switch (name) {
+      case 'maxvalue':
+      case 'minvalue':
+      case 'step':
+        if (this.state.props.datatype === 'number' && this.initialized) {
+          this.initNumericSlider();
+        }
       case 'datavalue':
         if (isNumber($new) && isNumber($old)) {
           this.invokeEventCallback('onChange', [null, this, $new, $old]);
         }
-      case 'maxvalue':
-      case 'minvalue':
-        this.setProp('datavalue', this.getDataValue() || 0);
-        this.computePosition(this.state.props.datavalue);
+        break;
     }
   }
-  computePosition(datavalue) {
-    var _this$state$track, _this$position;
+  onDataItemsUpdate() {
+    var _this$getScaledDataVa;
+    super.onDataItemsUpdate();
+    this.initScale();
+    this.computePosition(((_this$getScaledDataVa = this.getScaledDataValue()) === null || _this$getScaledDataVa === void 0 ? void 0 : _this$getScaledDataVa[0]) || 10, "track");
+  }
+  initScale() {
+    var _this$state$dataItems, _state$track;
     const props = this.state.props;
-    const width = ((_this$state$track = this.state.track) === null || _this$state$track === void 0 ? void 0 : _this$state$track.width) || 0;
-    const value = (datavalue - props.minvalue) / props.maxvalue * width;
-    (_this$position = this.position) === null || _this$position === void 0 ? void 0 : _this$position.setValue(isNaN(value) ? 0 : value);
+    const state = this.state;
+    this.scale = Scale.getInstanceWithTicks((_this$state$dataItems = this.state.dataItems) === null || _this$state$dataItems === void 0 ? void 0 : _this$state$dataItems.map((d, i) => ({
+      displayfield: d.displayexp || d.displayfield,
+      markValue: i + 1,
+      datafield: d.datafield,
+      dataitem: d
+    })));
+    const width = ((_state$track = state.track) === null || _state$track === void 0 ? void 0 : _state$track.width) || 0;
+    this.uiScale = this.scale.transform(0, width);
   }
-  renderWidget(props) {
-    var _this$state$track2;
-    const width = ((_this$state$track2 = this.state.track) === null || _this$state$track2 === void 0 ? void 0 : _this$state$track2.width) || 0;
+  computePosition(from, gestureType) {
+    const state = this.state;
+    const datavalue = this.getScaledDataValue();
+
+    // * single thumb slider
+    if (!state.props.range) {
+      var _this$position;
+      const value = this.getPositionFromValue(from);
+      (_this$position = this.position) === null || _this$position === void 0 || _this$position.setValue(isNaN(value) ? 0 : value);
+      return;
+    }
+    if (gestureType === 'highThumb') {
+      var _this$highPosition;
+      const value = this.getPositionFromValue(Math.max(datavalue[0], from));
+      (_this$highPosition = this.highPosition) === null || _this$highPosition === void 0 || _this$highPosition.setValue(value);
+    } else if (gestureType === 'lowThumb') {
+      var _this$position2;
+      const value = this.getPositionFromValue(Math.min(from, datavalue[1]));
+      (_this$position2 = this.position) === null || _this$position2 === void 0 || _this$position2.setValue(value);
+    } else {
+      var _this$scale$getMinTic, _this$position3, _this$scale$getMaxTic, _this$highPosition2;
+      /*
+       * gestureType: track
+       * initial position for low and high thumb
+       */
+      const lowPosition = this.getPositionFromValue((datavalue === null || datavalue === void 0 ? void 0 : datavalue[0]) || ((_this$scale$getMinTic = this.scale.getMinTick()) === null || _this$scale$getMinTic === void 0 ? void 0 : _this$scale$getMinTic.datafield));
+      (_this$position3 = this.position) === null || _this$position3 === void 0 || _this$position3.setValue(lowPosition || 0);
+      const highPosition = this.getPositionFromValue((datavalue === null || datavalue === void 0 ? void 0 : datavalue[1]) || ((_this$scale$getMaxTic = this.scale.getMaxTick()) === null || _this$scale$getMaxTic === void 0 ? void 0 : _this$scale$getMaxTic.datafield));
+      (_this$highPosition2 = this.highPosition) === null || _this$highPosition2 === void 0 || _this$highPosition2.setValue(highPosition || 0);
+    }
+  }
+  getTooltipLabel(value, initialValue, type) {
+    var _this$scale3;
+    const props = this.props;
+    let tooltipValue = initialValue;
+    const updatedPositionInPx = Number(JSON.stringify(value));
+    if (updatedPositionInPx) {
+      tooltipValue = this.scale.ticks[this.uiScale.getTickIndex(updatedPositionInPx)].markValue;
+    }
+    const tick = (_this$scale3 = this.scale) === null || _this$scale3 === void 0 ? void 0 : _this$scale3.getTick(tooltipValue);
+    // * getting custom tooltip label
+    if (tick && props.getToolTipExpression && this.initialized) {
+      var _tick$dataitem;
+      return props.getToolTipExpression((_tick$dataitem = tick.dataitem) === null || _tick$dataitem === void 0 ? void 0 : _tick$dataitem.dataObject);
+    }
+    return tick === null || tick === void 0 ? void 0 : tick.displayfield;
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.state.props.datatype === 'number') {
+      this.initNumericSlider();
+    }
+  }
+  renderToolTips(props) {
+    var _this$position4;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WmTooltip, {
+      showTooltip: props.showtooltip,
+      text: this.getTooltipLabel((_this$position4 = this.position) === null || _this$position4 === void 0 ? void 0 : _this$position4._value, sDataValue[0], 'lowThumb'),
+      tooltipStyle: [{
+        transform: [{
+          translateX: this.position
+        }]
+      }, this.styles.tooltip],
+      tooltipLabelStyle: this.styles.tooltipLabel,
+      tooltipTriangleStyle: this.styles.tooltipTriangle,
+      direction: props.tooltipdirection
+    }, /*#__PURE__*/React.createElement(GestureDetector, {
+      gesture: this.knobGesture
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.thumb, {
+        transform: [{
+          translateX: this.position
+        }]
+      }],
+      accessible: true,
+      accessibilityLabel: isRangeSlider && this.highPosition ? 'Low thumb' : 'Thumb'
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: this.styles.thumb.backgroundSize,
+      position: this.styles.thumb.backgroundPosition,
+      image: this.styles.thumb.backgroundImage,
+      repeat: this.styles.thumb.backgroundRepeat || 'no-repeat'
+    })))), isRangeSlider && this.highPosition ? /*#__PURE__*/React.createElement(WmTooltip, {
+      showTooltip: props.showtooltip,
+      text: this.getTooltipLabel(this.highPosition._value, sDataValue[1], 'highThumb'),
+      tooltipStyle: [{
+        transform: [{
+          translateX: this.highPosition
+        }]
+      }, this.styles.tooltip],
+      tooltipLabelStyle: this.styles.tooltipLabel,
+      tooltipTriangleStyle: this.styles.tooltipTriangle,
+      direction: props.tooltipdirection
+    }, /*#__PURE__*/React.createElement(GestureDetector, {
+      gesture: this.highKnobGesture
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.thumb, {
+        transform: [{
+          translateX: this.highPosition
+        }]
+      }],
+      accessible: true,
+      accessibilityLabel: 'High thumb'
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: this.styles.thumb.backgroundSize,
+      position: this.styles.thumb.backgroundPosition,
+      image: this.styles.thumb.backgroundImage,
+      repeat: this.styles.thumb.backgroundRepeat || 'no-repeat'
+    })))) : null);
+  }
+  renderOldMarkerStyle(props) {
+    var _this$scale4, _this$scale5, _last2, _this$scale6;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
-    }, this._background, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
         justifyContent: 'space-between'
       }
     }, /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('min'), {
       style: [this.styles.text, this.styles.minimumValue]
-    }), props.minvalue), /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('value'), {
+    }), (_this$scale4 = this.scale) === null || _this$scale4 === void 0 || (_this$scale4 = _this$scale4.ticks[0]) === null || _this$scale4 === void 0 ? void 0 : _this$scale4.displayfield), isRangeSlider ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('value'), {
       style: [this.styles.text, this.styles.value]
-    }), props.datavalue), /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('max'), {
+    }), (_this$scale5 = this.scale) === null || _this$scale5 === void 0 || (_this$scale5 = _this$scale5.ticks.find(t => t.datafield === props.datavalue)) === null || _this$scale5 === void 0 ? void 0 : _this$scale5.displayfield), /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestProps('max'), {
       style: [this.styles.text, this.styles.maximumValue]
-    }), props.maxvalue)), /*#__PURE__*/React.createElement(GestureDetector, {
+    }), (_last2 = last((_this$scale6 = this.scale) === null || _this$scale6 === void 0 ? void 0 : _this$scale6.ticks)) === null || _last2 === void 0 ? void 0 : _last2.displayfield));
+  }
+  renderMarkers(props) {
+    var _this$state$track;
+    const width = ((_this$state$track = this.state.track) === null || _this$state$track === void 0 ? void 0 : _this$state$track.width) || 0;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(View, null, width ? this.scale.ticks.map((t, i) => {
+      const markWidth = 10;
+      const stepwiseLeft = this.getPositionFromValue(t.markValue);
+      const labelText = t.displayfield;
+      return /*#__PURE__*/React.createElement(View, {
+        key: i,
+        style: [this.styles.markerWrapper, {
+          left: stepwiseLeft,
+          bottom: markWidth / 2
+        }]
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [this.styles.markerLabel, {
+          bottom: markWidth / 2 + 10
+        }, this.styles.markerLabelStyle, i === 0 ? this.styles.minimumValue : null, i === this.scale.ticks.length - 1 ? this.styles.maximumValue : null]
+      }, labelText), /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.mark, {
+          width: markWidth,
+          height: markWidth,
+          borderRadius: markWidth
+        }, this.styles.markerStyle]
+      }));
+    }) : null));
+  }
+  renderTracks(props) {
+    var _this$state$track2;
+    const width = ((_this$state$track2 = this.state.track) === null || _this$state$track2 === void 0 ? void 0 : _this$state$track2.width) || 0;
+    const sDataValue = this.getScaledDataValue();
+    const isRangeSlider = props.range && sDataValue.length > 1;
+    return /*#__PURE__*/React.createElement(GestureDetector, {
       gesture: this.trackGesture
     }, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
       activeOpacity: 1,
-      style: this.styles.track,
+      style: [this.styles.track, this.styles.trackStyle],
       onLayout: this.onLayoutChange
-    }, this.getTestProps()), /*#__PURE__*/React.createElement(Animated.View, {
-      style: [this.styles.minimumTrack, {
+    }, this.getTestProps(), getAccessibilityProps(AccessibilityWidgetType.SLIDER, props)), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [isRangeSlider && this.highPosition ? this.styles.maximumTrack : this.styles.minimumTrack, {
         width: width,
         transform: [{
           translateX: this.position.interpolate({
@@ -127,28 +413,32 @@ export default class WmSlider extends BaseComponent {
             outputRange: [-width, 0]
           })
         }]
-      }]
+      }, this.styles.minimumTrackStyle]
     }), /*#__PURE__*/React.createElement(Animated.View, {
-      style: [this.styles.maximumTrack, {
+      style: [isRangeSlider && this.highPosition ? this.styles.minimumTrack : this.styles.maximumTrack, {
         width: width,
         transform: [{
           translateX: this.position
         }]
-      }]
-    }))), /*#__PURE__*/React.createElement(GestureDetector, {
-      gesture: this.knobGesture
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [this.styles.thumb, {
+      }, this.styles.activeTrackStyle]
+    }), isRangeSlider && this.highPosition ? /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.maximumTrack, {
+        width: width,
         transform: [{
-          translateX: this.position
+          translateX: this.highPosition
         }]
-      }]
-    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
-      size: this.styles.thumb.backgroundSize || 'contain',
-      position: this.styles.thumb.backgroundPosition,
-      image: this.styles.thumb.backgroundImage,
-      repeat: this.styles.thumb.backgroundRepeat || 'no-repeat'
-    }))));
+      }, this.styles.maximumTrackStyle]
+    }) : null));
+  }
+  renderWidget(props) {
+    const sDataValue = this.getScaledDataValue();
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, !props.showmarkers && !props.showtooltip ? this.renderOldMarkerStyle(props) : null, this.renderTracks(props), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row'
+      }
+    }, props.showmarkers ? this.renderMarkers(props) : null, this.renderToolTips(props)));
   }
 }
 //# sourceMappingURL=slider.component.js.map