Slider的demo

横向Slider

效果

代码

                var s1 = new Slider({
                    $target: '#slider1',
                    orientation: 'horizontal'
                });

竖向Slider

效果

代码

                var s2 = new Slider({
                    $target: '#slider2',
                    orientation: 'vertical'
                });

配置min,max,value

效果

代码

                var s3 = new Slider({
                    $target: '#slider3',
                    orientation: 'horizontal',
                    min: 0,
                    max: 300,
                    value: 20
                });

配置step

效果

代码

                var s4 = new Slider({
                    $target: '#slider4',
                    orientation: 'horizontal',
                    step: 10
                });

配置type = 'min'

效果

代码

                var s5 = new Slider({
                    $target: '#slider5',
                    orientation: 'horizontal',
                    value: 20,
                    type: 'min'
                });

配置type = 'max'

效果

代码

                var s6 = new Slider({
                    $target: '#slider6',
                    orientation: 'horizontal',
                    value: 20,
                    type: 'max'
                });

配置readOnly = true

效果

代码

                var s7 = new Slider({
                    $target: '#slider7',
                    orientation: 'horizontal',
                    value: 20,
                    type: 'min',
                    readOnly: true
                });

配置disabled = true

效果

代码

                var s8 = new Slider({
                    $target: '#slider8',
                    orientation: 'horizontal',
                    value: 20,
                    type: 'min',
                    disabled: true
                });

各种事件回调

效果

代码

                var s9 = new Slider({
                    $target: '#slider9',
                    orientation: 'horizontal',
                    create: function (e) {
                        console.log('create');
                    },
                    start: function (e) {
                        console.log('start');
                    },
                    slide: function (e) {
                        console.log('slide');
                    },
                    stop: function (e) {
                        console.log('stop');
                    },
                    destroy: function (e) {
                        console.log('destroy');
                    },
                    change: function (e) {
                        console.log('change');
                    }
                });

设置当前值，可设百分比

效果

代码

                var s10 = new Slider({
                    $target: '#slider10',
                    orientation: 'horizontal',
                    type: 'max'
                });
                $('#J_btn_value').on('click', function () {
                    s10.setter('value', 30);
                });
                $('#J_btn_percent').on('click', function () {
                    s10.setter('value', '62%');
                });

析构组件

效果

代码

                var s11 = new Slider({
                    $target: '#slider11',
                    orientation: 'horizontal',
                });
                $('#J_btn_display').on('click', function () {
                    var $self = $(this);
                    if ($self.html() === '隐藏组件') {
                        $self.html('显示组件');
                        s11.hide();
                    } else {
                        $self.html('隐藏组件');
                        s11.show();
                    }
                });
                $('#J_btn_destroy').on('click', function () {
                    var $self = $(this);
                    s11.destroy();
                    $self.attr('disabled', true);
                    $('#J_btn_display').attr('disabled', true);
                });