Ответы пользователя по тегу Вёрстка
  • Как подключить 2 ползунка Ion.RangeSlider?

    @Hank_Moody Автор вопроса
    верстальщик, frontend разработчик
    разобрался сам)) вот пример может кому еще пригодится - продублировал код инициализации и заменил повторные переменные. Может можно как-то правильнее сделать, если кто знает напишите пожалуйста
    $(function () {
                // start $range1
    
                var $range = $(".js-range-slider-1"),
                    $inputFrom = $(".js-input-from-1"),
                    $inputTo = $(".js-input-to-1"),
                    instance,
                    min = 0,
                    max = 5.25,
                    from = 0,
                    to = 0;
    
                $range.ionRangeSlider({
                    skin: "round",
                    type: "double",
                    grid: true,
                    min: min,
                    max: max,
                    from: 0,
                    to: 5.25,
                    step: 0.01,
                    onStart: updateInputs,
                    onChange: updateInputs
                });
                instance = $range.data("ionRangeSlider");
    
                function updateInputs (data) {
                    from = data.from;
                    to = data.to;
    
                    $inputFrom.prop("value", from);
                    $inputTo.prop("value", to);
                }
    
                $inputFrom.on("input", function () {
                    var val = $(this).prop("value");
    
                    // validate
                    if (val < min) {
                        val = min;
                    } else if (val > to) {
                        val = to;
                    }
    
                    instance.update({
                        from: val
                    });
                });
    
                $inputTo.on("input", function () {
                    var val = $(this).prop("value");
    
                    // validate
                    if (val < from) {
                        val = from;
                    } else if (val > max) {
                        val = max;
                    }
    
                    instance.update({
                        to: val
                    });
                });
    
                // end $range1
    
                // start $range2
    
                var $range2 = $(".js-range-slider-2"),
                    $inputFrom2 = $(".js-input-from-2"),
                    $inputTo2 = $(".js-input-to-2"),
                    instance2,
                    min2 = 0,
                    max2 = 5.25,
                    from2 = 0,
                    to2 = 0;
    
                $range2.ionRangeSlider({
                    skin: "round",
                    type: "double",
                    grid: true,
                    min: min2,
                    max: max2,
                    from: 0,
                    to: 5.25,
                    step: 0.01,
                    onStart: updateInputs2,
                    onChange: updateInputs2
                });
                instance2 = $range2.data("ionRangeSlider");
    
                function updateInputs2 (data) {
                    from2 = data.from;
                    to2 = data.to;
    
                    $inputFrom2.prop("value", from2);
                    $inputTo2.prop("value", to2);
                }
    
                $inputFrom2.on("input", function () {
                    var val = $(this).prop("value");
    
                    // validate
                    if (val < min2) {
                        val = min2;
                    } else if (val > to2) {
                        val = to2;
                    }
    
                    instance2.update({
                        from: val
                    });
                });
    
                $inputTo2.on("input", function () {
                    var val = $(this).prop("value");
    
                    // validate
                    if (val < from2) {
                        val = from2;
                    } else if (val > max2) {
                        val = max2;
                    }
    
                    instance2.update({
                        to: val
                    });
                });
    
                // end $range2
            });
    Ответ написан
    Комментировать
  • Как сделать эмитацю scroll?

    @Hank_Moody
    верстальщик, frontend разработчик
    Комментировать