jquery ui slider range fix to RTL

Question

I wang to change Jquery slider range to RTL. I am usign this: http://jqueryui.com/slider/#range

Jquery code:

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

See image:

I want to invert the max and min buttons place (RTL). how to change jquery code or html code?

Answer 1

I don't like the patch from http://keith-wood.name/rtlsliders.html simply because it patches an old version of jQuery UI, and unfortunately they did not incorporate it into the main code yet (why?!).

Another option would be to reverse the min and max , but the widget doesn't allow min > max , so I tricked it. I did { min: max * -1, max: min * -1 } , and then used value * -1 .

Example time: say you want a slider that lets the user choose a number between 1 and 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]>

Now it looks from right to left! Now you simply need to multiply whatever result you get from the slider by -1 , so when he moves the slider the where 7 in RTL would be and you'd get a -7 , simply multiply by -1 it before using. This also works for ranges.

You can obviously use other mathematical systems but I found this to be the simplest to comprehend.

Answer 2

Visit the below link for more help:

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