jQuery Ползунок диапазона с фиксированными значениями и соответствующим выводом текста - PullRequest
Новая
       64

jQuery Ползунок диапазона с фиксированными значениями и соответствующим выводом текста

0 голосов
/ 29 мая 2020

Я здесь новенький .. извините за мой плохой английский sh: D

Я ищу ползунок диапазона с фиксированными значениями и дополнительным выводом текста.

Вот пример: http://james2013.batcave.net/s100.htm

<p>
</p><div id="resolution-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
<div id="resolution"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>
<script>
$(document).ready(function(){
    var valMap = [6, 10, 12, 18 , 35, 56];
    $("#resolution-slider").slider({
      value: valMap[0],  // Start slider from first (0th) element
      max: valMap.length-1, // Set "max" attribute to array length minus 1
      min: 0,
      values: [0], 
      create: function( event, ui ) {  // Place numeric value on page before slide
      $(".resolution-preview").html(valMap[0]); 
      },
      slide: function(event, ui) {
        $("#resolution").val(valMap[ui.values[0]]); // Fetch selected value from array               
        $(".resolution-preview").html(valMap[ui.values[0]]);
      }  
    });
});
</script>

Если отображается число 18, также должен отображаться текст, относящийся только к этому значению.

Если другое номер выбран, появится другой текст.

Спасибо за помощь, ребята <3 </p>

1 Ответ

0 голосов
/ 29 мая 2020

Поскольку вы не используете Range, вам не нужно использовать values только 1 value. Рассмотрим следующий пример. 

$(document).ready(function() {
  var valMap = ["6 (Six)", "10 (Ten)", "12 (Twelve)", "18 (Eighteen)", "35 (Thirty Five)", "56 (Fifty Six)"];
  $("#resolution-slider").slider({
    value: 0,
    max: valMap.length - 1,
    min: 0,
    create: function(event, ui) {
      $(".resolution-preview").html(valMap[0]);
    },
    slide: function(event, ui) {
      $(".resolution-preview").html(valMap[ui.value]);
    }
  });
});
#resolution-slider {
  width: 500px;
  margin-left: 50px;
}

.resolution-preview {
  margin-top: 10px;
  margin-left: 50px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p></p>

<div id="resolution-slider"></div>
<div class="resolution-preview">6</div>

<h4>Slider width is set in css for this page</h4>

Когда ползунок перемещается из 0 в 5, это значение затем используется как индекс массива valMap.

Обновлено

Если вы хотите отображать текст, вам просто нужно обновить массив, чтобы он содержал текст, а не только числа.

...