Как сбросить значение диапазона ползунка jquery -UI при нажатии кнопки - PullRequest
Новая
       5

Как сбросить значение диапазона ползунка jquery -UI при нажатии кнопки

0 голосов
/ 04 августа 2020

У меня есть ползунок Jquery UI. При нажатии кнопки сброса мне нужно сбросить значение ползунка. Здесь я могу сбросить значение, но не могу изменить цвет фона в исходное положение. Я использовал функцию ползунка в файле сценария и css в стиле. css для стилизации ползунка и содержимого. Я использовал здесь jquery библиотеку пользовательского интерфейса, но не могу найти решение. 

(function() {
  // Helper function
  var update_handle_track_pos;

  update_handle_track_pos = function(slider, ui_handle_pos) {
    var handle_track_xoffset, slider_range_inverse_width;
    handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
    $(slider).find(".handle-track").css("left", handle_track_xoffset);
    slider_range_inverse_width = (100 - ui_handle_pos) + "%";
    return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
  };
  $(".trybtn").click(function() {
    $("#js-slider").slider("value", $(this).val());
  });
  // Init slider
  $("#js-slider").slider({
    range: "min",
    max: 100,
    value: 50,
    create: function(event, ui) {
      var slider;
      slider = $(event.target);

      // Append the slider handle with a center dot and it's own track
      slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');

      // Append the slider with an inverse range
      slider.prepend('<div class="slider-range-inverse"></div>');

      // Set initial dimensions
      slider.find(".handle-track").css("width", event.target.clientWidth);

      // Set initial position for tracks
      return update_handle_track_pos(event.target, $(this).slider("value"));
    },
    slide: function(event, ui) {
      // Update position of tracks
      return update_handle_track_pos(event.target, ui.value);
    }
  });

}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
  height: 14px;
  border-radius: 10px;
  border-width: 0;
}

body {
  background: #F0F0F0;
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
  color: #444;
  margin-top: 50px;
}

#slider-container {
  width: 80%;
  height: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border-radius: 5px;
  padding: 35px 40px 30px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ui-slider {
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}

.ui-slider * {
  outline: none;
}

.ui-slider .slider-range-inverse {
  background: #CCC;
  position: absolute;
  right: 0;
}

.ui-slider .ui-slider-range {
  background: transparent;
}

.ui-slider .ui-slider-handle {
  width: 28px;
  height: 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background: #FFF;
  top: -7px;
  border-radius: 50%;
  border-width: 0;
}

.ui-slider .ui-slider-handle:active {
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}

.ui-slider .ui-slider-handle .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  background: transparent;
  overflow: hidden;
}

.ui-slider .ui-slider-handle .dot .handle-track {
  display: block;
  height: 18px;
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  position: absolute;
  padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
  <div id="js-slider"></div>
</div>
<div class="trybtn">
  <span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

U необходимо вызвать ваш метод при событии clickTrybtn.

JS: 

$(".trybtn").click(function() {
    $("#js-slider").slider("value", $(this).val());
    update_handle_track_pos($("#js-slider"), $(this).val());
  });

Рабочая скрипка: https://jsfiddle.net/psx57Lc6/

0 голосов
/ 04 августа 2020 

(function() {
  // Helper function
  var update_handle_track_pos;

  update_handle_track_pos = function(slider, ui_handle_pos) {
    var handle_track_xoffset, slider_range_inverse_width;
    handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth);
    $(slider).find(".handle-track").css("left", handle_track_xoffset);
    slider_range_inverse_width = (100 - ui_handle_pos) + "%";
    return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width);
  };
  $(".trybtn").click(function() {
    $("#js-slider").slider("value", $(this).val());
    $('.slider-range-inverse').css('width', 100-$(this).val() + '%');
  });
  // Init slider
  $("#js-slider").slider({
    range: "min",
    max: 100,
    value: 50,
    create: function(event, ui) {
      var slider;
      slider = $(event.target);

      // Append the slider handle with a center dot and it's own track
      slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>');

      // Append the slider with an inverse range
      slider.prepend('<div class="slider-range-inverse"></div>');

      // Set initial dimensions
      slider.find(".handle-track").css("width", event.target.clientWidth);

      // Set initial position for tracks
      return update_handle_track_pos(event.target, $(this).slider("value"));
    },
    slide: function(event, ui) {
      // Update position of tracks
      return update_handle_track_pos(event.target, ui.value);
    }
  });

}).call(this);
.ui-slider,
.ui-slider .slider-range-inverse,
.ui-slider .ui-slider-range {
  height: 14px;
  border-radius: 10px;
  border-width: 0;
}

body {
  background: #F0F0F0;
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
  color: #444;
  margin-top: 50px;
}

#slider-container {
  width: 80%;
  height: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border-radius: 5px;
  padding: 35px 40px 30px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ui-slider {
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
}

.ui-slider * {
  outline: none;
}

.ui-slider .slider-range-inverse {
  background: red;
  position: absolute;
  right: 0;
}

.ui-slider .ui-slider-range {
  background: transparent;
}

.ui-slider .ui-slider-handle {
  width: 28px;
  height: 28px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background: #FFF;
  top: -7px;
  border-radius: 50%;
  border-width: 0;
}

.ui-slider .ui-slider-handle:active {
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}

.ui-slider .ui-slider-handle .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  background: transparent;
  overflow: hidden;
}

.ui-slider .ui-slider-handle .dot .handle-track {
  display: block;
  height: 18px;
  background-color: #1ABC9C;
  background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%);
  position: absolute;
  padding-right: 18px;
}
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="./style.css">
<div id="slider-container">
  <div id="js-slider"></div>
</div>
<div class="trybtn">
  <span>Reset</span>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

Немного хакерский, но обновите css ширину

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...