Home/ Questions/Q 8238461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T19:49:33+00:00

I am a jQuery newbie. I’ve been trying to get the UI slider to

  • 0

I am a jQuery newbie. I’ve been trying to get the UI slider to work but haven’t had any luck so far. What I want to do is be able to pass parameters to a function so that the parameter can be used as selectors in the slider. One of the parameters is the slider div’s id and the other is the id of the input text box that goes along with it. Oh and the UI slider is a basic step slider as shown in the demos.

Here is the part of the HTML and JS files that concern this:

HTML PART:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="content/jquery-ui/development-bundle/themes/smoothness/jquery.ui.all.css">
    <script type="text/javascript" src="content/jquery-ui/development-bundle/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="content/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="content/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="content/jquery-ui/development-bundle/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="content/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
    <script type="text/javascript" src="journal.js"></script>
</head>
<body>
    <section id="journalEntry">
                <div id="base">
                    <label for="intensity">How intense was it?</label>  <input type="text" id="intensity" /><div id="intensityGuage"></div> 
                </div>
        </section>
</body>
</html>

jQuery Part:

$(document).ready(function(){
        guageBar(intensityGuage,intensity);
});

function guageBar(guageId,inputId){
        $( "[id='"+guageId+"']" ).slider({
            value:1,
            min: 1,
            max: 10,
            step: 1,
            slide: function( event, ui ) {
                $( "id[='"+inputId+"']" ).val( ui.value );
            }
        });
        $( "id=['"+inputId+"']" ).val( $( "id=['"+guageId+"']" ).slider( "value" ) );
}

Thanks in advance for your help 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    $(document).ready(function() {
    guageBar('intensityGuage', 'intensity');
});
function guageBar(guageId, inputId) {
    $("#" + guageId).slider({
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {
            $("#" + inputId).val(ui.value);
        }
    });
    $("#" + inputId).val($("#" + guageId).slider("value"));
}​

    jsFiddle example

    You were passing variables instead of strings to your function, and you were also not referencing the IDs properly.

    • 0