Отзывчивый слайдер javascript

Я пытаюсь создать отзывчивый слайдер. Я искал много примеров горизонтального слайдера и нашел, что это самый простой и простой. Теперь я хочу адаптировать код, чтобы сделать его отзывчивым. Когда ползунок, например, в 2013 году, чем что-то должно произойти. Все, что мне нужно знать, это то, где в коде я бы это реализовал. Поэтому, если кто-то может помочь адаптироваться под кодом, который будет очень полезен. Просто другой оператор печати для каждого числа, которое можно было бы скопировать, было бы удивительным. Заранее спасибо!Отзывчивый слайдер javascript

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Slider bound to select</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    var select = $("#minbeds"); 
    var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
     min: 1, 
     max: 8, 
     range: "min", 
     value: select[ 0 ].selectedIndex + 1, 
     slide: function(event, ui) { 
     select[ 0 ].selectedIndex = ui.value - 1; 
     } 
    }); 
    $("#minbeds").change(function() { 
     slider.slider("value", this.selectedIndex + 1); 
    }); 
    }); 
    </script> 
</head> 
<body> 

<form id="reservation"> 
    <label for="minbeds">Minimum number of beds</label> 
    <select name="minbeds" id="minbeds"> 
    <option>2013</option> 
    <option>2014</option> 
    <option>2015</option> 
    <option>2016</option> 
    <option>2017</option> 
    <option>2018</option> 
    <option>2019</option> 
    <option>2020</option> 
    </select> 
</form> 


</body> 
</html>

источник

2015-02-16 Zuenie

Это происходит в функции слайд

slide: function(event, ui) { 
    console.log(ui.value); // prints 1 for 2013, 2 for 2014 ... 
    select[ 0 ].selectedIndex = ui.value - 1; 
}

Чтобы сделать его отзывчивым, использовать что-то вроде этого

slide: function(event, ui) { 
    var index = ui.value-1; 
    select[ 0 ].selectedIndex = index; 
    if (select[0][index].text === "2013") { // text works, but innerHTML, innerText and label do too 
     console.log("2013!"); 
    } 
}

источник

2015-02-16 11:12:52

Мой слайдер пропадает, когда я использую свой код. – Zuenie

Спасибо, что показали мне, где он находится в коде. Я буду работать с оператором if и определить действие для каждого выбора, который можно сделать в слайдере. Но я не понимаю, почему мой слайдер исчезает, когда я копирую код в моем скрипте. – Zuenie

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

Отзывчивый слайдер javascript

ответ

Смежные вопросы