Change value of slider using jQuery

时间:2019-02-05 17:15:56

标签: javascript jquery asp.net asp.net-mvc

I have a UI slider that starts at 0 million and goes up to 20000 million.

I want to change the value when it reaches 1000 to say 1 milliard, and when it reaches 20000 to say 20 milliard.

For example, the value 1100 million should output '1 milliard 100'. i have another question ,i want to that this platform shows 1milliard 100 but i can return 1100 million.it is for example.how can i do it? I don't know how can I do it?

  <span><a id="minamountr">0</a>million</span>
  <span><a id="maxamountr">20000</a>million</span>
</div>
<script>
  $(".sliderr").slider({
    min: 0,
    max: 20000,
    values: [0, 20000],
    range: true,
    step: 100,
    slide: function(event, ui) {
      $("#minamountr").html(ui.values[0]);
      $("#maxamountr").html(ui.values[1]);
    }
  });
</script>





        i try it but it doesnn't work:
change: function (event, ui) {
                    value = ui.value;
                    mily = Math.floor(value / 1000);
                    milyoun = value % 1000 
                    if (mily > 1) {
                       milyString = 'milliyard';
                    } else {
                       milyString = 'million';
                    }            
                    if (mily == 0) {
                        altValue = milyoun + ' ' + 'million';
                    } 

                    alert(altValue);

                    $(event.target).slider("option", "altValue", 
                         altValue);
                }

1 个答案:

答案 0 :(得分:0)

据我了解,当您的滑块值为1000时,它应在minamountr中显示1,而当2000时,其应显示2。与maxamountr的情况类似。因此,非常简单,请参见下面的示例:

<span><a id="minamountr">0</a>میلیون</span>
<span><a id="maxamountr">20000</a>میلیون</span>

<script>
  $(".sliderr").slider({
    min: 0,
    max: 20000,
    values: [0, 20000],
    range: true,
    step: 100,
    slide: function(event, ui) {
    ( ui.values[0] % 1000 == 0 ) ? $("#minamountr").html(ui.values[0] / 1000.0) :  $("#minamountr").html(ui.values[0]);

    ( ui.values[1] % 1000 == 0 ) ? $("#maxamountr").html(ui.values[1] / 1000.0) :  $("#minamountr").html(ui.values[1]);


    }
  });
</script>