Круглое текстовое поле слайдера всегда видимое

Я использую http://roundsliderui.com/demos.html библиотеку круглых слайдеров. Я хочу показать редактируемое текстовое поле всегда показывать, а не скрывать. Спасибо

1 ответ

Решение

Поймите, вы должны предоставить код и можете получить помощь или предложения от людей здесь. Я взял приведенный вами пример и внес некоторые изменения.

Вот рабочий пример: http://jsfiddle.net/Twisty/Lorej7up/

HTML

<div class="slider-wrapper">
  <div id="slider">
  </div>
  <input type="text" id="myToolTip" class="rs-input rs-tooltip-text" style="height: 27px; width: 32px;" />
</div>

CSS

.slider-wrapper {
  position: relative;
}

.slider-wrapper input.rs-input {
  position: absolute;
  top: 95px;
  left: 93px;
  z-index: 100;
}

JQuery

function updateToolTip() {
  $("#myToolTip").val($("#slider").roundSlider("option", "value"));
}
$(function() {
  $("#slider").roundSlider({
    sliderType: "min-range",
    radius: 110,
    width: 10,
    startAngle: 90,
    value: "82",
    showTooltip: false,
    editableTooltip: false,
    drag: updateToolTip,
    change: updateToolTip
  });
  $("#myToolTip").val($("#slider").roundSlider("option", "value"));
  $("#myToolTip").change(function() {
    $("#slider").roundSlider("option", "value", $(this).val());
  });
});
Другие вопросы по тегам