JQuery UI слайдер диапазона подсказки

Question

Как я могу получить мой JQuery диапазона UI слайдер для отображения всплывающих подсказок поверх маркеров, как так:

<span class="tooltip"></span> <div id="slider-range"></div> 
<button id="reset" type="button" class="btn btn-success" onclick="reset_slider('#slider-range')">Reset</button> 

Вот сценарий до сих пор:

$(document).ready(function() { 
    $("#slider-range").slider({ 
     min: 0, 
     max: 1000, 
     step: 1, 
     range: true, 
     values: [0, 1000], 
     slide: function(event, ui) { 
      for (var i = 0; i < ui.values.length; ++i) { 
       $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
      } 
     } 
    }); 

    $("input.sliderValue").change(function() { 
     var $this = $(this); 
     $("#slider-range").slider("values", $this.data("index"), $this.val()); 

    }); 
}); 

Вот как это выглядит прямо сейчас, все его недостающие - всплывающие подсказки сверху.

Answer 1

Вы должны объединить два примера:

• http://jqueryui.com/slider/#range
• http://jqueryui.com/tooltip/#custom-style

Рабочий пример: https://jsfiddle.net/Twisty/c90ee4xe/

HTML

<div class="wrapper"> 
    <div id="slider-range"> 
    </div> 
    <a href="" id="reset" class="btn btn-success">Reset</a> 
</div> 

CSS

.wrapper { 
    display: block; 
    padding: 3px; 
    margin-top: 20px; 
} 

#slider-range { 
    width: 75%; 
    margin: 20px; 
} 

#slider-range .ui-slider-handle { 
    background: #0e6; 
    border-radius: 6px; 
} 

#slider-range .ui-slider-handle.ui-state-active { 
    border: #093; 
} 

#slider-range .ui-slider-range { 
    background: #093; 
} 

.ui-tooltip, 
.arrow:after { 
    background: #000; 
} 

.ui-tooltip { 
    color: #fff; 
    border: 0; 
    border-radius: 10px; 
    box-shadow: none; 
} 

.arrow { 
    width: 70px; 
    height: 16px; 
    overflow: hidden; 
    position: absolute; 
    left: 50%; 
    margin-left: -35px; 
    bottom: -16px; 
} 

.arrow.top { 
    top: -16px; 
    bottom: auto; 
} 

.arrow.left { 
    left: 20%; 
} 

.arrow:after { 
    content: ""; 
    position: absolute; 
    left: 20px; 
    top: -20px; 
    width: 25px; 
    height: 25px; 
    box-shadow: 6px 5px 9px -9px black; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.arrow.top:after { 
    bottom: -20px; 
    top: auto; 
} 

#reset { 
    color: #fff; 
    background: #090; 
    border-radius: 6px; 
    font-family: verdana; 
    font-weight: bold; 
    display: inline-block; 
    padding: .25em; 
    text-decoration: none; 
} 

JavaScript

$(document).ready(function() { 
    $("#slider-range").slider({ 
    min: 0, 
    max: 1000, 
    step: 1, 
    range: true, 
    values: [0, 1000], 
    slide: function(event, ui) { 
     var low, high; 
     low = $(this).slider("values", 0); 
     high = $(this).slider("values", 1); 
     $(this).tooltip("option", "content", low + ":" + high); 
    } 
    }); 

    $("#slider-range").tooltip({ 
    items: ".ui-slider", 
    content: "0:1000", 
    position: { 
     my: "center bottom-20", 
     at: "center top", 
     using: function(position, feedback) { 
     $(this).css(position); 
     $("<div>") 
      .addClass("arrow") 
      .addClass(feedback.vertical) 
      .addClass(feedback.horizontal) 
      .appendTo(this); 
     } 
    } 
    }); 

    $("#reset").click(function(e) { 
    e.preventDefault(); 
    $("#slider-range").slider("values", [0, 1000]).tooltip("option", "content", "0:1000").tooltip("close"); 
    }); 
}); 

Для Slider, мы делаем практически все то же самое. Только в slide мы обновляем content всплывающей подсказки вместо полей.

Для этого примера мы используем только 1 подсказку на 1 слайдере. Если у вас несколько слайдеров, см.: http://jqueryui.com/tooltip/#custom-content Это будет сложнее. Если у вас меньше ползунков, вы можете просто сделать всплывающую подсказку для каждого. В противном случае потребуется набор опций item и некоторые способы связать определенные слайдеры с их всплывающей подсказкой.

Всплывающая подсказка довольно прямолинейная. Мы установим content нашей внутренней ценности, так как мы знаем, что она будет изменена позже. Мы также устанавливаем position, который будет жидким. Это помогает перемещать всплывающую подсказку выше или ниже в зависимости от feedback, и мы настраиваем стрелку для соответствия.