Range Slider - Функция запуска во время слайда не работает?

Question

Range Slider - Функция запуска во время слайда не работает?

0

Я использую noUISlider на странице, чтобы позволить человеку выбрать значение. Однако слова noUISlider, когда человек скользит, я хотел бы, чтобы он запускал функцию, которая в основном проверяет число, и если число меньше определенного значения, оно отображает текст в div.

Проблема в том, что значение записывается в скрытый ввод, но функция для отображения текста никогда не работает.

Вот мой код для функции:

var heightSlide = $('.height-noUI');
var onSlide = function(){
    var slideHeight = "$('input[name=CAT_Custom_8]').val();"
    if(slideHeight <= 20){
        $('.height-noUI-text').text('Short');
    }else if(slideHeight <= 40){
        $('.height-noUI-text').text('Short to Medium');
    }else if(slideHeight <= 60){
        $('.height-noUI-text').text('Medium');
    }else if(slideHeight <= 80){
        $('.height-noUI-text').text('Medium to Tall');
    }else if(slideHeight <= 100){
        $('.height-noUI-text').text('Tall');
    }
};
heightSlide.on('slide', onSlide);

Вот jsFiddle кода с рабочим слайдером.

Как обновить мой код для работы, чтобы текст отображался в div при слайдере слайдера?

L84 13 май 2014, в 05:08

Источник

Теги:

javascript

jquery

nouislider

1 ответ

Ещё вопросы

Ahmet Can Güven · Accepted Answer · 2014-05-13T01-05-00.000Z

Я решил вашу проблему. Оформить код для понимания.

Вот jsfiddle

$(function() {

    $(".height-noUI").noUiSlider({
       range: [0, 100],
       start: 0,
        range: {
        'min': [0],
        'max': [100]
        },
       step: 20,
       connect: "lower",
       serialization: {
          lower: [
              $.Link({
                  target: $("input[name=CAT_Custom_8]")
              })
          ],
          format: {
            decimals: 0
          }
       }
    });

    var heightSlide = $('.height-noUI');
    var onSlide = function(){
        var slideHeight = $('.noUi-origin').position().left / $('.noUi-origin').parent().width() * 100; //Here is the trick.
        if(slideHeight <= 20){
            $('.height-noUI-text').text('Short');
        }else if(slideHeight <= 40){
            $('.height-noUI-text').text('Short to Medium');
        }else if(slideHeight <= 60){
            $('.height-noUI-text').text('Medium');
        }else if(slideHeight <= 80){
            $('.height-noUI-text').text('Medium to Tall');
        }else if(slideHeight <= 100){
            $('.height-noUI-text').text('Tall');
        }
    };
    heightSlide.on('slide', onSlide);

});

Спасибо вам за помощь. Вопрос: Когда на входе отображается 20, на нем должно отображаться «Короткое», однако на «Короткое - среднее». Как мне это исправить?
Это должно работать в jsfiddle. Я проверил это сейчас. 20 => Короткий
Я понимаю, что происходит. slideHeight был что-то вроде 20.00000153354664 и был больше 20. Я добавил Math.floor() чтобы решить эту проблему. Вот обновленная скрипка .