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

したがって、ここでは 2 つのことが行われています。

最初にthis.value + "%"、入力した数値をパーセンテージに変換します。したがって、2400 は 2400% になり、これは非常に大きな値です。

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

より高い新しい最大値を設定する場合は 2 番目。また、その量に合わせて要素を調整する必要があります。

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

CSS ファイルを変更し、id を設定width:100%;しますデモについては、#sliderこのフィドルhttp://jsfiddle.net/edisutrisno/uHNsv/7/を確認してください

于 2013-09-06T16:06:14.003 に答える