Question

我使用jquery-ui滑块作为侧面滚动条，并且我遇到问题，手柄滑过末端排水沟（如果你滑动最远的滑块，可以看到here对）。我已经尝试了所有我能用CSS思考的东西，试图让手柄没有比排水沟更进一步，但无济于事。任何建议都将不胜感激。

为了澄清我正在添加下面的图表来显示问题（由于句柄很小，它非常微妙，但是如果你在CSS中创建一个大句柄，那么句柄正好宽度的一半超出排水沟。）

Here是问题的一个问题。基本上我希望把手留在阴沟里。

alt text

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

  <style type="text/css">

  .demo {
     width: 800px;
     margin: 50px auto 0 auto;
  }



  .ui-slider-horizontal  {
    background: #DFEFFC none repeat scroll 0 0;
  }

  .ui-slider .ui-slider-handle {
    background-image:url(http://img207.imageshack.us/img207/7760/sliderhandle.png);
    cursor:default;
    height:15px;
    position: absolute;
    width:27px;
    z-index:2;   
    margin-left: -1px;
    margin-top: 3px;
  }

  .ui-slider 
  {
    position:relative;
    text-align:left;
  }


  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({
    slide: function( event, ui ) {      

            //normalise handle position between 0 and 1 relative to slider width
            var range = $("#slider").width();//width of slider
            var normalised = $("#slider1handle").position().left / range;

            //normalise between desired range: 0:HandleWidth
            var range2 = $("#slider1handle").width();
            normalised = (normalised*range2) + 1;      

            var marginAmount = -1*normalised;
            $("#slider1handle").css("margin-left", marginAmount);      
        }

    });
    $('a.ui-slider-handle').attr('id', "slider1handle");



  });
  </script>
</head>
<body>
<div class="demo">
  <div id="slider"></div>
</div>
</body>
</html>

Answer 1

手柄的宽度恰好超过了水沟

更像是 half 的宽度，所以它并没有真正超越滑块的末端。正确对齐屏幕截图时，您会看到手柄的中心位于滑块的末端，就像我希望它可以进行非常精确的设置一样。当左边是0％，右边是100％时，手柄必须移动一点，以便选择100％。

jQuery sliders with a line to indicate the end of the slider

扩大手柄时也是如此。在你的情况下，手柄移动更多超过右边缘宽度的一半，那么我认为它在左边延伸少而不是一半？当playing with the CSS a bit我用大手柄获得相同的效果时，例如：

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

更好shown使用箭头，有点黑客：

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('http://i.stack.imgur.com/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

Slider with arrow to show gutter

但是，关于您作为滚动条的用法，请参阅slider scrollbar demo，它似乎可以满足您的需求？ 使用滑块操作页面上内容的位置。在这种情况下，它充当滚动条，有可能在需要时捕获值。

Answer 2

如果您在滑块的任一端添加一个上限，您可以模仿效果而不会改变滑块本身的任何内容。

<div class="cap left"></div>
(slider container here)
<div class="cap right"></div>

只需添加一些非常基本的CSS ...

.cap {
    width: (half the handle width)
}
.ui-slider, .cap.left, .cap.right {
    float: left;
}
.ui-slider {
    width: (desired total gutter width - handle width);
}
.ui-slider-handle {
    margin-left: -(half the handle width);
}

...然后相应地设置你的帽子。

对于单个滑块上的范围着色，只需使用范围效果而不是普通装订线设置左帽的样式。

Answer 3

我遇到了同样的问题，我认为我的解决方案非常简单。正如Dr.Gibbs所说，可拖动滑块手柄包含默认设置为“父”。所以你可以通过使用CSS来克服它......

考虑句柄img为100px，并且遏制div为250px宽。遏制div应该具有宽度值250 - 100 = 150px和margin-right:100px，以使maxZoom img显示在正确的位置。比你的手柄图像的确切限制...

Answer 4

或者你可以用数学来做，像这样：

slide: function(event, ui) {
    $(ui.handle).html("<span class='ui-corner-all hover'>"+ui.value+"</span>");
    fix_slider(ui.handle,ui.value);
},
function fix_slider(slider,value) {
    var $.slider_decalatio = 0.35 // for an width of 27px
    var pos_calc = $.slider_decalation * value; // y = ax;
    $(slider).find('span').css("left",pos_calc + "px");
});

这可以改进，但它是一个快速修复。

Answer 5

我找到了解决方案。但首先：单滑块和范围滑块我遇到了同样的问题。应用任何CSS都不会起作用，也没有任何Javascript-Fix-Approach。

解决方案对我来说是：滑动区域是滚动条宽度的100％。因此，当您的滑块宽度为100px，并将其设置为“50”时，手柄的“左边距”为50％。当它的200px，设置为20，其10％......等等。

我查找了计算句柄左边距的那段代码，减少了并添加了标准的左边距。

用您选择的编辑器打开jquery-ui.js，然后转到~13170并查找 function _refreshValue。你也可以搜索“valPercent”的第一个外观在“valPercent = .....”之后，我添加了以下内容：

valPercent = valPercent * 0.95 + 3.1;

这使我的处理完全在范围和排水沟内。也许您需要根据您使用的ui模板来使用这些值来获得最佳设置，但至少这个

因为我需要任何声望来发布图片，这里是我为您绘制的链接。

http://www.germanunique.com/slider.png

如果您需要帮助，可以给我发电子邮件至info@germanunique.com或留言。这是我在StackOveflow上的第一篇文章，我希望它可以帮助那些有同样问题的人。

BYE！

Answer 6

对我来说，这是：

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

Answer 7

我处理它的简单方法是使滑块轨道透明并添加一个我可以单独设置样式的背景图层。

HTML

<div class="slider-container">
  <div class="slider-background"></div>
  <div id="slider"></div>
</div>

CSS

.slider-container {
  position: relative;
}
.slider-background {
  position: absolute;
  top: 0;
  left: 10px;
  background: blue;
}
#slider {
  background: transparent;
}

Answer 8

我意识到这是一篇老文章，但是当我遇到这个问题时，我找到了一个简单得多的解决方案：

由于手柄纯粹是视觉元素，因此将手柄的margin-left设置为减去手柄width一半的。现在它将正确地位于滑轨末端的中心。

例如：

#slider-handle { width: 4rem; margin-left: -2rem; }

Answer 9

只需在滑块上添加“padding-right”，它等于.ui-slider-handle类元素的数量。

#slider {
 height: 20px;
 width: 150px;
 background: #ccc;
 padding-right: 20px; (equal to the width of the handle below)
}
.ui-slider .ui-slider-handle {
  height: 20px;
  width: 20px;
  background: #333;
  display: block;
  position: relative;
}

如何阻止jquery UI滑块滑动到排水沟之外？

9 个答案: