0

我目前正在编辑一个 jQuery 滑块。我想获得与 jQuery UI 滑块相同的效果——在那里你可以输入一个最大值，比如“2500”，然后滑块可以转到那个位置，而不会超出 div / 屏幕。

这是我的滑块：http: //jsfiddle.net/uHNsv/

#slider {
  height: auto;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
#slider .ui-slider-handle {
  top: 65px !important;
}

#slider::before, .slider-filled-top {
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  transform: rotateX(70deg);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
}

#slider {
  width: 400px;
  margin: 0 auto;
  position: relative;
  margin: 50px auto;
  display: block;
  -webkit-perspective: 200;
  -moz-perspective: 200;
  -ms-perspective: 200;
  -o-perspective: 200;
  perspective: 200;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#slider input[type="range"] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 10;
  background: transparent;
  -webkit-appearance: none;
  -moz-apperance: none;
}
#slider input[type="range"]::-webkit-slider-thumb {
  background: #f9f9f9;
  display: inline-block;
  width: 30px;
  height: 18px;
  margin-top: 3px;
  -webkit-appearance: none;
  -moz-apperance: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: dimgrey 0 2px 2px -1px;
  -moz-box-shadow: dimgrey 0 2px 2px -1px;
  box-shadow: dimgrey 0 2px 2px -1px;
}
#slider::before, #slider::after {
  content: "";
  display: block;
  width: 400px;
  height: 50px;
  background: rgba(233, 233, 233, 0.6);
  margin: 0;
  z-index: 0;
}
#slider::before {
  position: absolute;
  background: #f9f9f9;
}
#slider::after {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(204, 204, 204, 0.9)), color-stop(100%, rgba(228, 228, 228, 0.9)));
  background-image: -webkit-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
  background-image: -moz-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
  background-image: -o-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
  background-image: linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
}

.slider-filled-top,
.slider-filled-front {
  background: #9cde45;
  width: 50%;
  height: 50px;
}

.slider-filled-front {
  position: absolute;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #4aaf1b), color-stop(100%, #82d02f));
  background-image: -webkit-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
  background-image: -moz-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
  background-image: -o-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
  background-image: linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
}

但是，我的滑块并没有这样做。我只能让它达到 100% - 改变输入的宽度只会让它超出屏幕并使其水平很长。

如何使滑块的最大值适合正在填充的 div 区域？

4

3 回答 3

1

这是你要找的吗？

jsFiddle 演示

$(function() {
  $('input').on('change', function(){
    var max = $(this).attr("max");

    $(".slider-filled-top, .slider-filled-front").width(
        (this.value * 100 / max) + "%");
  });
});
于 2013-09-06T16:01:26.687 回答
0

所以这里发生了两件事。

First you were putting this.value + "%" that is going to take whatever number you put in and turn it into a percentage. So 2400 would be 2400%, that is huge.

$(function() {
  $('input').on('change', function(){
    $(".slider-filled-top, .slider-filled-front").width(this.value);
  });
});

Second if you want to set a new max value that is higher. you will also need to adjust your element to fit that amount.

html

<div id="slider">
  <input type="range" min="0" max="400" value="50">
  <div class="slider-filled-top"></div>
  <div class="slider-filled-front"></div>
</div>

css

#slider {
  width: 400px;
}

http://jsfiddle.net/uHNsv/4/

于 2013-09-06T16:04:57.977 回答
0

Modify CSS file, set width:100%; for #slider id Check this fiddle http://jsfiddle.net/edisutrisno/uHNsv/7/ for demo

于 2013-09-06T16:06:14.003 回答