2
votes

Is there any working example of a simple noUiSlider including a play/pause button, or a strategy how I could achieve this?

I've a simple noUiSlider connected to a stack of images. The number of the slider is connected to the index of the image stack to make the image visible.

var currentIndex = 0;    
function animation(value, handleElement, slider){
    //alert(value);
    imgArray[currentIndex].setVisible(false);
    currentIndex = Math.floor(value * 45 / 100);        
    imgArray[currentIndex].setVisible(true);
}

// pane Image Layer slider
function setText( value, handleElement, slider ){
    $("#someElement").text( value );
}

$('#html5').noUiSlider({
    start: 45,
    step: 1,
    range: {
        'min': 0,
        'max': 45,                
    },
    format: wNumb({
        decimals: 0
    })
});

$("#html5").Link('lower').to(animation);        
$("#html5").Link('lower').to(setText);

If I slide the slider back and forward the images change, but now I would like to add a play/pause button.

Could you update your question to be more specific about what exactly you are trying to achieve? - Lg102
@Lg102 I've updated my question with my code - Mattijn