Слайдер Logarithmi c с мобильным телефоном jquery - PullRequest
Новая
       18

Слайдер Logarithmi c с мобильным телефоном jquery

0 голосов
/ 20 апреля 2020

Вопрос, возможно ли создать логарифмический слайдер c с мобильным телефоном jQuery? Я нашел примеры с jquery пользовательским интерфейсом, но, к сожалению, без мобильного.

Я могу получить значение ползунка через $("#slider-1").val(). Затем я могу изменить значение на соответствующую шкалу логарифми c. Тем не менее, как я могу изменить соответствующую текстовую метку ползунка, чтобы показать значение логарифми c? Чтобы пользователю было понятно, какое текущее значение он выбрал? Я не могу найти какие-либо методы, чтобы сделать это?

Потому что я начал чувствовать, что это невозможно. Я думал о сокрытии значения слайдера с помощью CSS; #sliders input { display: none; } и создание нового поля ввода, которое будет показывать логарифмическое значение c ползунка с помощью функции адаптивного изменения. 

$("#sliders").change(function() {
  var slider_value = $("#slider-1").val()
  $("#text-1").val(slider_value)
})

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  function linspace(a, b, n) {
    var every = (b - a) / (n - 1),
      range = [];
    for (i = a; i < b; i += every)
      range.push(i);
    return range.length == n ? range : range.concat(b);
  }

  function logspace(a, b, n) {
    return linspace(a, b, n).map(function(x) {
      return Math.pow(10, x);
    });
  }
</script>

<body>
  <form id="sliders">
    <div data-role="fieldcontain">
      <label for="slider-1">Slider:</label>
      <input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" />
    </div>
    <div data-role="fieldcontain">
      <label for="text-1">Text input:</label>
      <input type="text" name="text-1" id="text-1">
    </div>
  </form>
  
  <script>
  // Does work
  alert($("#slider-1").val())
  $("#text-1").val($("#slider-1").val()) 
  
  // Does not work 
  $("#sliders").change(function() {
    var slider_value = $("#slider-1").val()
    $("#text-1").val(slider_value)
  })

  // Does not work
  //$("#slider-1").on('slidestop', function(event) {
  //  alert('hi');
  //});

  // Does not work 
  //$("#slider-1").on("change", function () {
  //   $("#text-1").val($("#slider-1").val())    
  //});
</script>
  
</body>

</html>
...