我在项目中使用Ion.RangeSlider,但是我需要将滑块范围更改为RTL。
我该怎么做?

jQuery代码:

<script>
    var $range = $(".js-range-slider");
    var $result = $(".js-result");
    var $result2 = $(".js-result2");
    var minrange = 0;
    var minrange_title = 69000;
    var maxrange = 4596800;
    var avreg = (maxrange/100);
    var avregfinal = (avreg * 10);
    var avff = Math.ceil(avregfinal);
    function prettify(num) {
        var n = num.toString();
        return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + ","  );
    }

    $range.ionRangeSlider({
        type: "double",
        grid: false,
        min: minrange_title,
        max: maxrange,
        from: minrange_title,
        to: maxrange,
        step: (avff - minrange_title),
        hide_min_max: true,
        hide_from_to: true,
        prettify_separator: ",",
        onStart: function(data) {
            $result.text(prettify(data.from));
            $result2.text(prettify(data.to));
        },
        onChange: function(data) {
            $result.text(prettify(data.from));
            $result2.text(prettify(data.to));
        }


    });
</script>


HTML和CSS代码:

<style>
   .range-slider {
        position: relative;
        height: 80px;
        width: 210px !important;
        margin: auto;

    }
    .extra-controls {
        font-size: 9pt;
        position: relative;
        float: left;
        padding: 10px 0 0;
        text-align: right;
        color: #4d4d4d;
    }
    .extra-controls2 {
        position: relative;
        float: right;
        padding: 10px 0 0;
        font-size: 9pt;
        color: #4d4d4d;
    }

</style>




<div class="range-slider">
        <input type="text" class="js-range-slider" value="" />

        <div class="yekan toman extra-controls js-result">

        </div>
        <div class="yekan toman extra-controls2 js-result2">

        </div>
    </div>


我需要更改此滑块范围的代码,并且我不喜欢选择其他滑块范围。
http://ionden.com/a/plugins/ion.rangeSlider/en.html

谢谢。

最佳答案

http://jsfiddle.net/SinaSaderi/Ldbr343s/

var $range = $(".js-range-slider"),
    min = 10,
    max = 70;

$range.ionRangeSlider({
  type: "single",
  min: min,
  max: max,
  from: max - 20 + min,
  prettify: function(num) {
    var tmp_min = min,
      tmp_max = max,
      tmp_num = num;

    if (min < 0) {
      tmp_min = 0;
      tmp_max = max - min;
      tmp_num = num - min;
      tmp_num = tmp_max - tmp_num;
      return tmp_num + min;
    } else {
      num = max - num + min;
      return num;
    }
  }
});

关于javascript - 如何将滑块范围方向更改为RTL?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42859488/

10-11 11:10