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

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

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

input[type='range'] 上的 overflow: hidden 可防止您的范围滑块位于范围滑块的“外部”。

您可以在 input[type='range']::-webkit-slider-thumb 上使用 box-shadow: -80px 0 0 80px #0098A6; 来使用 css 技巧来显示范围背景颜色，但这也 再次需要范围轨道上的overflow: hidden，并且会再次阻止在外部显示您的范围拇指（我已在我的解决方案中评论了这部分）。

所以我设法用 JS/JQuery 解决方案解决了这个问题。您还需要在 HTML 部分指定 min 和 max 属性，以便让 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，但在我看来更好，更实用。