简体   繁体   中英

How can I change the slider range direction to RTL?

I use Ion.RangeSlider for my Project but and I need to change slider range to RTL. How can I do this work?

Jquery code:

<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 and Css code:

<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>

I need to change code for this slider range and I do not like to choose another slider range. http://ionden.com/a/plugins/ion.rangeSlider/en.html

Thanks.

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;
    }
  }
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM