Home/ Questions/Q 9269893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T15:14:10+00:00

I would like to use jQuery to create one slider that allows two different

  • 0

I would like to use jQuery to create one slider that allows two different values to be chosen. I honestly have no idea where to get started.

I’d like for it to display positive values on both sides, but returns two values.

For example:

500———-0———-500

If the slider moves towards the left side, it returns “amount1”. If it moves to the right it returns “amount2”. Both numbers will be positive. I’ve toyed with this for hours to no avail.

Here is the sample code that I’m working with. Is this possible?

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider({
  value:0,
  min: 500,
  max: 500,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
$( "#amount1" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>

<p>
<label for="amount">Amount</label>
<input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

Thanks for any input!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would go about it like this:

    $(function() {
    $( "#slider" ).slider({
      value:0,
      min: -500,
      max: 500,
      slide: function( event, ui ) {
          if (ui.value > 0){
             $( "#amount1" ).val( "$" + ui.value );
          }else{
               //multiply by -1 to make positive
             $( "#amount2" ).val( "$" + parseInt(ui.value * -1));
          }
      }
    });
});

    DEMO: http://jsfiddle.net/TrgJR/

    Hope this helps and let me know if you have any questions!

    EDIT:

    Here is a cleaned up version.

    Thank you, mrtsherman & Doorknob for your contribution!

    $(function () {
    $("#slider").slider({
        value: 0,
        min: -500,
        max: 500,
        step: 10,
        slide: function (event, ui) {
            if (ui.value > 0) {
                $("#amount2").val("$" + ui.value);
                $("#amount1").val("");
            } else {
                //multiply by -1 to make positive
                $("#amount1").val("$" + parseInt(ui.value * -1));
                $("#amount2").val("");
            }
        }
    });
});

    DEMO: http://jsfiddle.net/PXDJb/1/

    • 0