How to use jQuery UI slider in a function and pass different parameters for selectors?

Question

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 :)

can you make some fiddle for this one, http://jsfiddle.net – fedmich Jul 09 '12 at 16:22 — fedmich, Jul 09 '12 at 16:22
@fedmich http://jsfiddle.net/nitstorm/NrLnx/ – Nitin Venkatesh Jul 09 '12 at 16:34 — Nitin Venkatesh, Jul 09 '12 at 16:34

score 2 · Accepted Answer · answered Jul 09 '12 at 16:38

2

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.

answered Jul 09 '12 at 16:38

j08691

204,283
31
260
272

Thanks a ton! Total newbie here, appreciate the help. I have another question, how do I make the slider value and inputId value always be the same no matter even if one is changed? Or is that a new question? – Nitin Venkatesh Jul 09 '12 at 16:59
1

If I understand you correctly, you want the slider and input field to be bound so that when one changes, the other changes? Like this http://jsfiddle.net/j08691/NrLnx/3/ ? – j08691 Jul 09 '12 at 17:07

How to use jQuery UI slider in a function and pass different parameters for selectors?

1 Answers1