更改第一个手柄左侧的 jquery 滑块背景颜色

发布于 2024-11-08 13:09:35 字数 507 浏览 0 评论 0原文

我有一个 jquery 范围滑块,但现在我想为其添加一个额外的功能。

我希望手柄的左侧是与右侧不同的颜色。 我做了一个小模型,所以我的意思很清楚。

在此处输入图像描述

我已经找到了一种获取最小值的方法:

$(".sleep").slider("option", "min");

并且我找到了从第一个滑块

$(".sleep").slider("values", 0)

但现在我有点不知如何继续。希望有人能帮助我!

编辑: 创建了一个 jsfiddle 页面以使其更容易一些: http://jsfiddle.net/BxY99/12/< /a>

I have a jquery range-slider, but now I want to add an extra function to it.

I want the left side of the handle to be another color than the right side.
I made a little mock-up so it's clear what I mean.

enter image description here

I already found a way to get the minimum value:

$(".sleep").slider("option", "min");

and I found the code for getting the value from the first slider

$(".sleep").slider("values", 0)

But now I'm kinda stuck how to continue. Hope someone can help me!

Edit:
created a jsfiddle page to make it a little bit easier: http://jsfiddle.net/BxY99/12/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

ˇ宁静的妩媚 2024-11-15 13:09:35

明白了 Kim,

http://jsfiddle.net/BxY99/14/

想知道我是如何获得 8.6 的吗?我没有任何线索,纯粹是反复试验。我建议使用某种百分比宽度,但我似乎无法找出可能有效的公式。

这里有一个解释,

滑块左端的 CSS,模拟 jQuery 滑块,

.customMarker {
    display: block;
    font-size: 0.7em;
    position: absolute;
    z-index: 1;
    background-color:#ff0000;
    top:0;
    left:0;
    height:100%;
}

我们将标记附加到滑块并处理滑动事件以设置其宽度。

var slideVal = 0;
$(".sleep").slider({
          range: true,
          min: 0,
          max: 2879,
          values: [540, 1020],
          step:5,
          animate: true,
          slide: function(event, ui) {
            slideVal = $(".sleep").slider("values", 0) / 8.6;

    $('#values').text(slideVal);
    $('.customMarker').css('width', slideVal + 'px');
}
});

$('.sleep').prepend("<div class='customMarker'></div>");

Got it Kim,

http://jsfiddle.net/BxY99/14/

Wondering how I got 8.6? I have not the remotest clue, pure trial and error. I'd recommend using a percentage width of some kind, but I can't seem to figure out a formula that might work.

Here's an explanation,

CSS for the left end of the slider, emulating the jQuery slider,

.customMarker {
    display: block;
    font-size: 0.7em;
    position: absolute;
    z-index: 1;
    background-color:#ff0000;
    top:0;
    left:0;
    height:100%;
}

We append the marker to the slider and handle the slide event to set its width.

var slideVal = 0;
$(".sleep").slider({
          range: true,
          min: 0,
          max: 2879,
          values: [540, 1020],
          step:5,
          animate: true,
          slide: function(event, ui) {
            slideVal = $(".sleep").slider("values", 0) / 8.6;

    $('#values').text(slideVal);
    $('.customMarker').css('width', slideVal + 'px');
}
});

$('.sleep').prepend("<div class='customMarker'></div>");
一梦等七年七年为一梦 2024-11-15 13:09:35

如果您使用 http://docs.jquery.com/UI/API/1.8/Slider 那么我认为在不改变实际实现的情况下这是不可能的。该元素由从左到右的单个 Div 元素组成

If you are using http://docs.jquery.com/UI/API/1.8/Slider then I do not think that is possible without changing the actual implementation. That one is made up of a single Div element from left to right

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文