Home/ Questions/Q 8238659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T19:53:18+00:00

I’ve got a problem with using javascript function inside Jquery. I want to get

  • 0

I’ve got a problem with using javascript function inside Jquery.
I want to get max and min value to the jquery SLIDER.
Please help.

Here is the markup.

$(document).ready(function() {

Here is the function MAX

    function getMax()
    {
             var options = document.getElementById('.price_range').childNodes;
                var min = 999999999;
                for(var i = 0; i < options.length; i++) {
                    if(options[i].value > max) max = options[i].value;
                }
                return max;
    }

Here is the function MIN

function getMin()
    { var options =document.getElementById('my_max').childNodes;
      var min = 999999999;

            for(var i = 0; i < options.length; i++) {
                        if(options[i].value < min) min = options[i].value;

            }
            return min;

    }

Here comes the slider function, it has to get min and max values from javascript functions 

      // Slider
            $('#slider').slider({
                             range: true,
                            min: getMin(),
                            max: getMax(),
                            step: 10, // Use this determine the amount of each interval
                    values: [ 20, 40 ], // The default range
                    slide: function( event, ui ) {
                        $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); // for input text box
                        $( "#my_min" ).val(ui.values[ 0 ]); // Display and selected the min Price
                        $( "#my_max" ).val(ui.values[ 1 ]); // Display and selected the max Price
                        }

            });
             //For dropdown box
    $( "#my_min" ).val($( "#slider" ).slider( "values", 0 ));
    $( "#my_max" ).val($( "#slider" ).slider( "values", 1 ));

         $("select.price_range").change(function () {
        $myMinValue = $("#my_min option:selected").val();
        $myMaxValue = $("#my_max option:selected").val();
        //Make changes on the slider itself
        if($myMinValue <= $myMaxValue) {
            $( "#slider" ).slider({
                values: [$myMinValue, $myMaxValue]
            });
        } else {
            alert("Invalid Input");
        }
    });


        });

and here is the index.html

  <body>

    <select id="my_min" class="price_range">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>
<select id="my_max" class="price_range">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select

    ><!-- Slider -->
    <h2 class="demoHeaders">Slider</h2>
    <label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Im not sure if i understand your problem fully,

    But calling a function using jquery is like this.

    $(document).ready(function() {
  var returnvalue = functionname();
});

    Is this what your looking for?

    • 0