Blogs

In this post, we will create a sample with the Slider widget. The sample will illustrate how to use the Slider APIs and how to trigger its ‘change’ event.
1. Add references to the javascript and stylesheet files. In order to use the Slider, you need to add the following references:

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxslider.js"></script>

2. Create the HTML structure. In the sample, we will have two things – a header and content areas. The header are will display the caption: “Precious Cars” and the content area will display a vertical slider and an image.

<div id="slider-demo-header">
    <div>
        <h3>
            Precious Cars</h3>
    </div>
</div>
<div>
    <div style="margin: 10px; float: right;">
        <div id="slider-demo-content-0" style="display: block">
            <img src="../../images/mercedes.jpg" alt="Mercedes" />
        </div>
        <div id="slider-demo-content-1" style="display: none">
            <img src="../../images/jaguar.jpg" alt="Jaguar" />
        </div>
        <div id="slider-demo-content-2" style="display: none">
            <img src="../../images/ferrari.jpg" alt="Ferrari" />
        </div>
        <div id="slider-demo-content-3" style="display: none">
            <img src="../../images/lamborgini.jpg" alt="Lamborgini" />
        </div>
    </div>
    <div class="slider-demo-slider-container">
        <div id="jqxSlider">
        </div>
    </div>
</div>

3. In the final step, we select the Slider’s div tag and call the jqxSlider constructor. In the initialization code, we set the slider’s orientation, width, height and mode. The ‘fixed’ mode specifies that the Slider’s thumb will use a step by step drag behavior instead of ‘smooth’ drag. The ‘smooth’ drag resembles the scrollbar thumb’s dragging. As we have 4 images in the list, we restrict the possible values by setting the ‘min’ and ‘max ‘properties to 0 and 3. To change the displayed image, we bind to the ‘change’ event of the Slider and change the displayed image depending on the Slider’s value by calling the showSlide and hideCurrentSlide functions.

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqxSlider').jqxSlider({ orientation: 'vertical', height: 170, width: 25, mode: 'fixed',
            min: 0, max: 3, ticksFrequency: 1,
        });

        var hideCurrentSlide = function () {
            $(contentContainerSelector + currentSlide).css('display', 'none');
        } 

        var showSlide = function (id) {
            hideCurrentSlide();
            $(contentContainerSelector + id).fadeIn(300, function () {

            });
            currentSlide = id;
        }

        var currentSlide = 0;
        var contentContainerSelector = '#slider-demo-content-';
        $('#jqxSlider').bind('change', function (event) {
             showSlide(event.args.value);
        });
    });
</script>

Online Demo: Vertical Slider
Download: sample.zip