Javascript 使用JS确定范围滑块背景宽度

我正在尝试使用jQuery控制范围滑块轨迹背景宽度。然而，为什么背景似乎与滑块的位置不匹配，这让我挠头

您可以在此处看到工作页面： （在Chrome或任何其他Webkit浏览器上查看）

这是我的密码：

// .chrome styling
    $( 'input' ).on( 'input', function( ) {
        var x = document.getElementById("cpu").max;
        var x = document.getElementById("ram").max;
        var x = document.getElementById("ssd").max;
        console.log(x);
        y = this.value - 1;
        console.log(y);
        var percentWidth = ((y / x) * 100);
        console.log(percentWidth);
        $( this ).css( 'background', 'linear-gradient(to right, #da0266 0%, #00aeff '+percentWidth +'%, #eef1f8 ' + percentWidth + '%, #eef1f8 100%)' );
    } );

我正在将这些值记录到console中，并且百分比似乎是正确的。我接着想，也许我已经设置了手动偏移来移动滑块拇指，但我没有设置，而且当从左向右移动滑块拇指时，背景似乎从太小变大（这使我认为这是一个倍增问题…）

我的数学正确吗？我从滑块值中减去1来处理“0”位置，然后生成滑块拇指应该位于的宽度百分比

编辑： 除第一个滑块外，我正在向所有滑块添加自定义值（这是为了确保它们在推送到商店之前显示用户实际选择的内容）：

---

添加

背景尺寸：105%100%！此选择器的重要信息

：

input[type="range"] {
        outline: none; 
        transition: background 450ms ease-in;
        -webkit-appearance: none;
        cursor: pointer;
        border-radius: 16px;
        height: 15px;
        -webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
        background-size: 105% 100% !important
    }

---

在Chrome和Firefox中似乎对我有用

背景与滑块不匹配是什么意思？在Firefox中，渐变背景跟随滑块，对我来说很好。我更新了你关于Chrome的问题-这似乎是ChromeThank中的一个问题，是的，这是一个Webkit浏览器问题。也会影响Safari。您是否正确设置了

背景大小

？不要使用

auto

我已将其设置为

cover

，但似乎没有什么不同。尽管“处理器”滑块仍存在问题。你认为这是计算吗？你是对的，奇怪的是为什么只有1受到影响。那个滑块有什么独特之处吗？众所周知，webkit要求在处理宽度/高度时将

背景大小

的两个值都设置为固定值。这是我唯一没有向其中添加自定义值的滑块，我将把它添加到主要问题中。在对设置进行多一点操作后，我设置了“处理器”的最大值滑块移动到14，背景开始完美匹配。然后我意识到，无论我改变哪个滑块，x值总是等于14。我想可能是因为我在同一个脚本中设置了x 3次，没有任何条件语句…最终修复了它！我没有意识到，但我正在选择“输入”并应用样式。我改变了这一点，通过他们的ID选择个人输入，现在一切都正常了！总的来说，您的答案是问题的实际解决方案，因此我已经标记了它！非常感谢你！

input[type="range"] {
        outline: none; 
        transition: background 450ms ease-in;
        -webkit-appearance: none;
        cursor: pointer;
        border-radius: 16px;
        height: 15px;
        -webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
        background-size: 105% 100% !important
    }