Как отобразить текстовые значения с помощью ползунка jQuery? - PullRequest
Новая
       6

Как отобразить текстовые значения с помощью ползунка jQuery?

0 голосов
/ 17 марта 2019

Моя цель - иметь ползунок, в котором скольжение изменит информационный текст.

Мобильные документы jQuery, к сожалению, показывают только числовые значения: http://demos.jquerymobile.com/1.4.5/slider/

В данный момент я использую поле выбора: 

<select name="condition" id="filter_condition"> 
    <option value="18">Average</option> 
    <option value="13">Good</option>
    <option value="277">Bad</option>
</select>

Как и в этом примере, значения не 1-3 и не в порядке.

Вместо того, чтобы показывать поле выбора, я хотел бы показать слайдер, где плохое находится слева, а хорошее справа.

Возможно ли это с мобильным jQuery? Я нашел только примеры с числовыми значениями.

1 Ответ

1 голос
/ 18 марта 2019

Не могу полностью понять, почему Ваши ценности не должны быть упорядочены, но в любом случае, вот мое предложение.

Если это не совсем то, что Вы ожидаете, можете обновить Ваш вопрос с более подробной информацией.

В вашем примере вам нужно всего лишь создать три сектора слайдера, соответствующие вашим параметрам и, очевидно, отношения с ними. Используйте cases[val].value, чтобы отфильтровать то, что Вам нужно. input.change событие - Ваш друг здесь. 

$(document).on("pagecreate", "#page-one", function() {
  var cases = [{value:277, label:"bad"},{value:18, label:"average"},{value:13, label:"good"}];
  $(".full-width-slider input").on("change", function() {
    var val = ($(this).val()/100)|0;
    $(".full-width-slider h3").text(cases[val].label);
  });
});
/* Hide the number input */
.full-width-slider input {
  display: none !important;
}
.full-width-slider .ui-slider-track {
  margin-left: 15px;
}

.full-width-slider h3 {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <div class="full-width-slider">
        <h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
        <input type="range" min="0" max="299" value="0" autocomplete="off" />
      </div>
    </div>
  </div>
</body>
</html>

Вот еще один пример событий slider: https://stackoverflow.com/a/44519349/4845566

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...