Javascript 具有图像背景和完全响应的JQUERY UI滑块

我试图实现的是：

当滑块位于除100%以外的任何给定点时：

这些要求是：

• 当箭头沿滑块移动时，左侧的渐变不得根据可用宽度进行更改。它应该显示与上述两个示例中所示完全相同的渐变量
• 滑块必须完全响应。这意味着当滑块太大时，如果使用渐变作为背景图像，则图像必须占据整个滑块，而不是在图像的100%宽度处重复或停止，并正确使用背景色。当滑块缩小时，同样适用
• 滑块中的所有元素（包括圆形箭头）必须响应

到目前为止，我已经尝试使用background image属性来实现这一点，但在响应性方面面临上述限制

HTML:

JS:

---

查看css的结尾并定制您的方式：

.ui-slider-handle { height:101%!important; margin-top:-0.75%}

---

关于背景：

使用：

$( window ).resize(function() {
   /*Here, you have to update the gradient width*/
   $("#my_slider.ui-widget-header").width(/* here*/);
   /*or other properties*/
   $("#my_slider.ui-widget-header").css("...prop...","...value...");
});

---

简而言之，CSS不足以使其100%响应。你必须使用一些JQuery。

这个fiddle链接会产生一个图像，我想这不是你的意图：对不起，现在更正了。你完成了99%的工作，你的JFiddle渐变管理还可以，代码很少。使控制器响应现在很容易了。@Strukt，但是梯度并不像我在示例图像上显示的那样。如果扩大或缩小窗口大小，渐变颜色将不保持不变。例如，在小屏幕上，当你将滑块设置为100%时，你看不到绿色渐变.Strukt，但渐变并不像我在示例图像上显示的那样。如果扩大或缩小窗口大小，渐变颜色将不保持不变。例如，在小屏幕大小上，当你将滑块设置为100%时，你看不到右端的绿色渐变。小提琴链接是sameI学会钓鱼，我不给已经制作好的鱼；）你自己试试，它对你来说更强大。

$(function () {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min:   30,
        max:   50,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));
});

.ui-slider-handle { height:101%!important; margin-top:-0.75%}

$( window ).resize(function() {
   /*Here, you have to update the gradient width*/
   $("#my_slider.ui-widget-header").width(/* here*/);
   /*or other properties*/
   $("#my_slider.ui-widget-header").css("...prop...","...value...");
});