Been struggling with this today... the code is pretty simple, but integrating it with an existing system that has its own quirky css has been annoying me today.. Here's an example that users letters instead of the normal slider numbers, and has the letter you're on on the slider itself, and then when you get to where you want to slide to it does an action based on the letter; if we have some content based on the letter you chose then we'll scroll to it, if we don't then we won't.
var $slider = $('#slider');
$slider.slider( );
var $handle = $('.carrierSlider .slider-handle');
$handle.text('A');
$carrierSlider.on( 'slide', function ( ev ) {
$handle.text( String.fromCharCode( 64 + ev.value ));
} );
$carrierSlider.on( 'slideStop', function ( ev ) {
for ( var i = ev.value; i > 0; i -- ) {
var ch = String.fromCharCode( i + 64 );
var m = $('div.' + ch );
if ( m.length( )) {
return console.log( 'hell yeah we have div.' + ch + ' let\'s scroll to it!' );
}
console.log( 'we don\'t have ' + ch + ' let\'s try again...' );
}
} );Hmm will maybe change this so it's more like the fast scrolling on the ipod, now I come to think of it that's more like the original spec.
Paul Clarke's weblog - I live in Hythe near Folkestone. Wed + dad to two, I am a full stack web engineer, + I do js / Node, some ruby, python, php etc. I like pubbing, parkrun, eating, home automation and other diy jiggery-pokery, history, tree stuff, Television, squirrels, pirates, lego, + TIME TRAVEL.