Question

我创建了滑块，它出现在html页面的顶部，但我需要它出现在底部，还有水平滑动条应该减少到它的大小的一半，我也想将值从（0-100）限制到（最小值：1 - 最大值：25）我是css的新手，我不知道如何做到这一点，有人可以帮助我。我还上传了完整的代码。

＆＃13;

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    create: function() {
      handle.text($(this).slider("value"));
    },
    slide: function(event, ui) {
      handle.text(ui.value);
    }
  });
});

＆＃13;

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

＆＃13;

Answer 1

要设置滑块的最小值和最大值，请执行以下操作：

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
    min: 1,               //<--------Min
    max: 25,              //<-------Max
create: function() {
  handle.text($(this).slider("value"));
},
slide: function(event, ui) {
  handle.text(ui.value);
}
  });
});

对于CSS，你可以这样定位：

#slider {
  width:50%; /*make it half its width*/
  position:absolute; /*allow you to position it at the bottom*/
  bottom:20px; /*how far from the bottom*/
  left:20px; /* how far from the left*/
}

演示：https://jsfiddle.net/3t0s597v/

Answer 2

在这里，您需要的一切！

$(function() {
  var handle = $("#custom-handle");
  $("#slider").slider({
 min: 1, 
max: 25, 
    create: function() {
      handle.text($(this).slider("value"))
    },
    slide: function(event, ui) {
      handle.text(ui.value);
    }
  });
});

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}

#slider {
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

如何使用CSS自定义滑动条

2 个答案: