Question

我有一个垂直范围滑块，并且我希望“拇指”（在滑块上移动的东西）比轨道本身更宽（非常类似于android滑块的外观）。

我尝试了很多东西，这是我最想做的

到目前为止，这是我的代码：

HTML

<div class="sliderContainer">
   <input type="range">
</div>

JS

$(window).on("load resize", function () {
   var sliderWidth = $('[type=range]').width();

   $('.custom-style-element-related-to-range').remove();

   $('<style class="custom-style-element-related-to-range">input[type="range"]::-webkit-slider-thumb { box-shadow: -' + sliderWidth + 'px 0 0 ' + sliderWidth + 'px;}<style/>').appendTo('head');
});

CSS

.sliderContainer {
    position: absolute;
    margin: 0 auto;
    left: -27px;
    top: 127px;
    width: 0px;
    height: 135px;
}

input[type='range'] {
    width: 120px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        overflow: hidden;
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #434343;
        color: #0098A6;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

input[type="range"]::-moz-range-progress {
    background-color: #0098A6;
}

input[type="range"]::-moz-range-track {
    background-color: #D2CECC;
}

input[type="range"]::-ms-fill-lower {
    background-color: #0098A6;
}

input[type="range"]::-ms-fill-upper {
    background-color: #D2CECC;
}

任何关于如何进步的想法都很棒

编辑：

这是我要实现的目标：

我已经尝试了更多的方法并设法使拇指位于“外侧”，但现在音轨不会改变颜色。

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
        -webkit-appearance: none;
        background-color: #D2CECC;
        transform: rotate(270deg);
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 3px;
        -webkit-appearance: none;
        color: #0098A6;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: pointer;
        background: #0098A6;
        color: transparent;
        border: 10px #0098A6;
        border-radius: 50%;
        margin-top: -3px;
    }
}

Answer 1

我花了一些时间解决这个问题，因为要找到最佳解决方案很困难。

public partial class MyForm : Form { ... // Unmanaged resources are allocated ... private readonly DataSet DS = new DataSet(); ... protected override void Dispose(bool disposing) { base.Dispose(disposing); if (disposing) { // ... Unmanaged resources are released if (DS != null) { // <- check for null : in order to be on the safe side DS.Dispose(); } } } ... }上的public bool IsBusy { set { isBusy = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsBusy))); } get { return isBusy; } }可以防止您的范围拇指位于范围滑块的外面。

您可以在overflow: hidden上使用input[type='range']来使用css技巧来显示范围背景颜色，但这也再次要求范围跟踪上的box-shadow: -80px 0 0 80px #0098A6;，并再次阻止您将范围拇指显示在外面（我已在解决方案中对此部分进行了注释）。

所以我设法用JS / JQuery解决方案解决了这个问题。您还需要在HTML部件上指定input[type='range']::-webkit-slider-thumb和overflow: hidden属性，以便让JS在拖动范围滑块时读取这些值。

您可以仅观看我为该问题创建的CodePen，然后将零件复制到您的需求中。它还证明了它的工作原理：

https://codepen.io/alexiovay/pen/VwYMZpg

我会尽可能地坚持您想要的设计结果。

Answer 2

我们都知道并喜欢CSS仅解决方案。但是，有时这并不是最佳解决方案！它通常不那么可读，包含许多变通办法，并且仅限于CSS的边界。

我真的很喜欢@AlexioVay的方法和解决方案，但是有一个问题，就是由于CSS的限制，如果您放开手柄，彩色部分只会更新（（编辑：现在已修复），您可能会花很长时间来根据自己的需求进行自定义。既然您已经在使用jQuery，为什么不只使用jQuery UI？

我认为这种解决方案更具可读性和实用性。

$(function() {
  $("#slider").slider({
    orientation: "vertical",
    range: "min",
    value: 35,
    min: 0,
    max: 100
  });
});

#slider {
  background: #e6e6e6;
  border: 0;
  width: 3px;
}

#slider * {
  outline: none;
}

#slider .ui-slider-range,
#slider .ui-slider-handle {
  background: #0098A6;
  border: 0;
}

#slider .ui-slider-handle {
  border-radius: 100%;
  width: 11px;
  height: 11px;
  margin-left: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"/>

<div id="slider"></div>

易于阅读的documentation，易于定制。由于它不仅是默认的HTML滑块，因此您可以将每个项目分别定位为将来的事件监听器或自定义CSS。这样，它不仅限于CSS限制。

所以，是的，我的解决方案不是CSS，但我认为这是更好的解决方案，而且更加实用。

如何使“范围滑块”上的“滑块”超出轨道

2 个答案: