时间戳

首页 > 解决方案 > 如何在单击按钮时重置 jquery-UI 滑块范围值

javascript - 如何在单击按钮时重置 jquery-UI 滑块范围值

问题描述

我有一个 Jquery UI 滑块，单击重置按钮时，我需要重置滑块值。在这里我可以重置值但不能将背景颜色更改为初始位置。我已将滑块函数用于脚本文件并将 css 用于 style.css 以设置滑块和内容的样式。我在这里使用过 jquery UI 库，但我没有得到解决方案。

(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>

标签： javascripthtmljquerycss

解决方案

你需要在 trybtn 点击事件下调用你的方法。

JS：

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

工作小提琴： https ://jsfiddle.net/psx57Lc6/

推荐阅读