How to select the value in an input range in jQuery

Question

Hi I've got a timeline which changes content when a button is pressed new content will be loaded.

I want to try and change this approach so its slightly more interactive. I imagine a HTML Slide and when the values are hit then the show and hide is activated.

Below is an example of my current structure of changing content out. However I'm not 100% sure how I should even be approaching a task like this.

My most valuable question I suppose which will ultimately help me form my script is how to select a certain value in the slider.

If somebody could point me in the right direction or perhaps if somebody can show me a working example that would great.

Any help and advice welcomed.

Code is below or view a jsFiddle

Example JS code to achieve show and hide old style (this shows the old buttons I used and how it interacted with the other elements in the page, as you can see on the click of the button elements are shown and hidden. I would like to achieve this with the range slider.):

$('#2003btn').on('click', function () {
    //hide elements
    $('.most_popular_contents').hide();
    $('.newsrotator').slideUp('fast');

    //specify rotator
    myRotator('#newsrotator2');

    //show elements
    $('.year2003').slideDown('fast');
    $('.news_content_2003').fadeIn('medium');

});});

Example of what I have tried:

$('p').hide();

if ( $('range').val() = '2004' ) {
$('p').show();
}

Example HTML slider to be used:

<div id="page-wrap">    
<form>
<div>
<input id="year_range" name="sue" type="range" min="2003" max="2013" value="2003" step="1" style="width: 100%;"/>
<output for="year"></output>
</div>
</form>    
</div>

Answer 1

Bind that range element to change event.

JS:

var slider = $('#year');
slider.change(function() {
    var newValue = parseInt($(this).val());
    if(newValue == 2004) {
        $('p').show();
    }
});

See a working demo here.