Code Samples: noUiSlider

Monday, November 28, 2016
JavaScript noUiSlider Example

Download nouislider.css & nouislider.js before try the example below.
noUiSlider code example

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="nouislider.css" rel="stylesheet">
    <script src="nouislider.js"></script
</head>

<body>
<div style="width: 90%; margin-left: 5%; padding-top: 30px;">
    <div class="parent">
        <h3>
            <i>NoUiSlider_1 = <span class="slider_value"></span></i>
            <input type="button" class="reset_1" value="Reset"/>
            <input type="button" class="disable disable_1" value="Disable"/>
            <input type="button" class="enable enable_1" value="Enable" style="display: none;"/>
        </h3>
        <div class="slider slider_1"></div>
    </div>
    <div class="parent">
        <h3>
            <i>NoUiSlider_2 = <span class="slider_value"></span></i>
            <input type="button" class="reset_2" value="Reset"/>
        </h3>
        <div class="slider slider_2"></div>
    </div>
    <div class="parent">
        <h3><i>Slider Example</i></h3>
        <div style="width: 120px;" class="slider-toggle"></div>
    </div>
</div>
</body>

<script type="text/javascript">
    createSimpleSlider();
    createToggleSlider();

    function createSimpleSlider() {
        for(var i = 1; i <= 2; i++) {
            var range = $('.slider_' + i)[0];

            noUiSlider.create(range, {
                start: 40,
                tooltips: [ true ],
                connect: [true, false],
                range: {
                    'min': 0,
                    'max': 100
                },
                format: {
                    to: function ( value ) {
                        return parseInt(value);
                    },
                    from: function ( value ) {
                        return value;
                    }
                }
            }).on('update', function( values, handle ) {
                var target = $(this.target);
                var slider_tooltip = target.find(".noUi-handle");
                if(values[handle] > 50) {
                    slider_tooltip.addClass("half_way_pass");
                }
                else {
                    slider_tooltip.removeClass("half_way_pass");
                }

                var slider_value = target.closest(".parent").find(".slider_value")[0];
                slider_value.innerHTML = values[handle];
            });

            $('.reset_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider")[0].noUiSlider.set([15]);
            })

            $('.disable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").attr("disabled", "disabled");
                target.hide();
                target.closest(".parent").find(".enable").show();
            })

            $('.enable_' + i).click(function() {
                var target = $(this);
                target.closest(".parent").find(".slider").removeAttr("disabled");
                target.hide();
                target.closest(".parent").find(".disable").show();
            })
        }
    }

    function createToggleSlider() {
        var toggleSlider = $('.slider-toggle')[0];

        noUiSlider.create(toggleSlider, {
            start: 0,
            range: {
                'min': [0, 1],
                'max': 1
            },
            format: {
                to: function ( value ) {
                    return parseInt(value);
                },
                from: function ( value ) {
                    return value;
                }
            }
        });

        toggleSlider.noUiSlider.on('update', function( values, handle ) {
            var target = $(this.target);
            var slider_tooltip = target.find(".noUi-handle");
            if(values[handle] > 0) {
                slider_tooltip.addClass("half_way_pass");
            }
            else {
                slider_tooltip.removeClass("half_way_pass");
            }

            var slider_value = target.closest(".parent").find(".slider_value")[0];
            slider_value.innerHTML = values[handle];
        });
    }
</script>
Pages

Monday, November 28, 2016

JavaScript noUiSlider Example

noUiSlider code example
