Function triggered when jQuery-ui slider or selectable is used

When the slider or the selection is used, respective variables are changed. I want to use those variables outside the slider/selectable-function in another function.

I have this slider:

handlevalues=[300,3000]
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 300,
max: 3000,
values: [ 300, 3000 ],
step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  handlevalues=($("#slider-range").slider('values'));

}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );

This selectable:

var whatsselected=[1,2,3,4,5,6]
$(function() {
        $("#selectable").bind("mousedown", function(e) {
            e.metaKey = true;
        }).selectable({
            stop: function() {}
        });
    });

I need this to come up whenever the user moves the slider or makes a selection.

console.log(handlevalues)
console.log(whatsselected)

The var whatsselected= is defined in the selectable function but I saw no need to post it here. I want one function to listen to both of those things because there will be a lot of sliders and selectables. I know I could just put a function in the codes of the slider/selectable but I need them outside.

I did not even bother posting my attempts. I am new to this and have not created the slider myself. I thought of function that triggers the console message when var handlevalues or var whatsselected change but I am not sure how/if that´s possible, considering it should listen to both variables.

Any help greatly appreciated!

Answers:

Answer

For slider:

Have hidden fields somewhere:

<input type="hidden" id="leftValue" value="0" /> 
<input type="hidden" id="rightValue" value="0" />

add "change" callback to your slider function:

$(function() {
$( "#slider-range" ).slider({
range: true,
min: 300,
max: 3000,
values: [ 300, 3000 ],
step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  handlevalues=($("#slider-range").slider('values'));

},
 change: function(event, ui) {

 $('#leftValue').val(ui.values[0]); //left value
 $('#rightValue').val(ui.values[0]); //left value


 }
});

As for selectable, I'm not familiar with it but it's probably something similar.

Hope it helps..

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.