Заставить пузырек ползунка не отставать от левой ручки - PullRequest
Новая
       9

Заставить пузырек ползунка не отставать от левой ручки

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

У меня есть коллекция предметов, которые я хочу отфильтровать по некоторым критериям (рейтинг, но это может быть что-то еще).Для этого у меня есть ползунок jQuery UI: 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $("#amount").text(ui.value);
  }
});
.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 0 10px 10px 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  transform: translateX(-50%);
  bottom: -27px;
  display: none;
  line-height: 20px;
  width: 40px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
  z-index: 2;
}

#rating_slider:active #amount {
  display: inline-block;
  margin-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

У меня есть «пузырь», который отображает текущее значение ползунка пользовательского интерфейса.Пузырь имеет position: absolute; и bottom: -27px;, поэтому он правильно расположен вертикально (на оси Oy).

Но его позиция left должна быть динамическая , чтобы пузырьне отставайте от (левой) ручки.

Мне не удалось этого добиться.

Какой самый простой, самый «надежный» способ достижения этого?

ОБНОВЛЕНИЕ:

Я захватил атрибут style дескриптора, который должно быть полезно но я не могу установить на #amount element: 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    var bubblex = $(this).find('.ui-state-focus').attr('style');
    console.log(bubblex);
    $(this).find("#amount").css({
      "left": bubblex
    });
  }
});

Как мне установить #amount?

Ответы [ 3 ]

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

Поскольку у вас возникают проблемы с преобразованием процентного значения в пиксели, я бы предпочел переместить элемент #amount в другое место, чтобы получить более точное позиционирование себя.

Давайте попробуем переместить его внутрь этих .ui-state-focus Якоря, пока слайд начинается. 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    //$("#amount").text(ui.value);
    $(this).find('.ui-state-focus').append($(this).find('#amount').text(ui.value)); //move the amount inside of an active anchor and update it's text value; 
  }
});
.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 0 10px 10px 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  transform: translateX(-50%);
  bottom: -27px;
  display: none;
  line-height: 20px;
  width: 40px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
  z-index: 2;
  left: 50%; /* as it's translated to -50%; put a left value of 50% to center align; */
}

#rating_slider:active #amount {
  display: inline-block;
  /*margin-left: 20px;*/ /* remove the margin */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

Надеюсь, это решит вашу проблему.

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

Вот версия с индикатором, показывающим, только если ручка используется (перемещена), с некоторыми визуальными улучшениями.Надеюсь, это поможет большему количеству разработчиков. 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $(this).find('.ui-state-focus').append($(this).find('#amount').show().text(ui.value));
  }
});
.toolbar {
  padding: 10px 15px;
  background: #efefef;
  border: 1px solid #ddd;
  margin: 10px;
}

#slider-container {
  position: relative;
}

#rating_slider {
  width: 200px;
  background: #fff;
}

#amount {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  display: none;
  line-height: 16px;
  width: 36px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  border-radius: 2px;
  color: #777;
  font-size: 11px;
  text-align: center;
}

#amount:after,
#amount:before {
  z-index: 3;
  position: absolute;
  border-style: solid;
  border-width: 0 4px 4px;
  content: "";
  height: 0;
  width: 0;
  right: auto;
}

#amount:before {
  top: -5px;
  left: 14px;
  border-color: transparent transparent #e2e2e2;
}

#amount:after {
  top: -4px;
  left: 14px;
  border-width: 0 4px 4px;
  border-color: transparent transparent #fff;
}

.ui-state-focus,
#amount {
  outline: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />

<div class="toolbar rounded-sm clearfix">
  <div class="d-inline-block pl-4" id="slider-container">
    <p class="my-0 pr-3 d-inline-block">Filter by rating:</p>
    <div id="rating_slider" class="d-inline-block">
      <div id="amount">3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
0 голосов
/ 03 марта 2019

Вы можете использовать значение ползунка, чтобы установить позиционирование left относительно элемента.Основная идея состоит в том, чтобы преобразовать значение в несколько% ширины ползунка. 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    $("#amount").text(ui.value);

    //Set the 'left' position dynamically
    $("#amount").css(
      "left", `${ ui.value*10 + "%" }`
    );
});

ИЛИ согласно вашему редактированию 

$("#rating_slider").slider({
  range: true,
  step: 0.5,
  min: 1,
  max: 10,
  values: [3, 10],
  animate: "slow",
  orientation: "horizontal",
  slide: function(event, ui) {
    var bubblex = $(this).find('.ui-state-focus').css('left');
    console.log(bubblex);
    $(this).find("#amount").css(
      "left", bubblex
    );
  }
});
...