jquery ui滑块范围修复到RTL

Question

我想将Jquery滑块范围更改为RTL。我是这样说的：http://jqueryui.com/slider/#range

Jquery代码：

    $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 1000000,
      values: [ 100000, 500000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val(addCommas(ui.values[1])+ " تومان                " + addCommas(ui.values[0])+" تومان");
      }
    });
    $( "#amount" ).val( addCommas( $( "#slider-range" ).slider( "values", 1 ) )  + " تومان                " + addCommas( $( "#slider-range" ).slider( "values", 0 ) ) + "تومان" );
  });

  function addCommas(nStr){
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

HTML code：

<label for="amount">قیمت:</label>
<div id="slider-range"></div>
<input type="text" id="amount" readonly>

见图片：

我想反转最大和最小按钮位置（RTL）。 如何更改jquery代码或HTML代码？

Answer 1

我不喜欢来自http://keith-wood.name/rtlsliders.html的补丁，因为它修补了旧版本的jQuery UI，不幸的是他们还没有将它合并到主代码中（为什么？！）。

另一种选择是反转min和max，但小部件不允许min > max，所以我欺骗了它。我做了{ min: max * -1, max: min * -1 }，然后使用了value * -1。

示例时间：假设您想要一个允许用户选择1和10之间的数字的滑块。

{ min: 1, max: 10 }
Generates: <[1][2][3][4][5][6][7][8][9][10]>
{ min: -10, max: -1 }
Generates: <[-10][-9][-8][-7][-6][-5][-4][-3][-2][-1]>

现在它从右到左看起来！现在你只需要将你从滑块得到的任何结果乘以-1，所以当他移动滑块时，RTL中的7将会是-7，你只需要-1，在使用之前乘以[RoutePrefix("licence")] [RoleAuthorize(Role.Administrator, Role.Partner)] public class LicencesController { [Route("")] public async Task<ActionResult> Index() { // code to get model ready return View(model); } } 。这也适用于范围。

你显然可以使用其他数学系统，但我发现这是最容易理解的。

Answer 2

请访问以下链接获取更多帮助：

http://keith-wood.name/rtlsliders.html