我尝试了多种方法将手柄安装在滑块中，但无法正常工作答案

【问题标题】：I've tried numerous ways to fit my handle in my slider and I can't get it working我尝试了多种方法将手柄安装在滑块中，但无法正常工作
【发布时间】：2013-11-13 22:24:03
【问题描述】：

我又回来问关于我的范围滑块的另一个问题。我有我需要的宽度和高度的范围滑块。我遇到的问题是手柄尺寸和位置。我将手柄设置为高于滑块本身，并且手柄位于正确的位置，但我无法弄清楚如何使手柄适合滑块本身而不会出现任何悬垂。我四处寻找，但没有发现任何可行的方法

我的 CSS 文件是

div.ui-slider-range.ui-widget-header {
background:#C6DC84;  
height:42px; 
}
div.ui-widget-content {
background: #D3D3D3;
height:42px;
}

div.ui-slider-horizontal .ui-slider-handle {
background:#A18ABF;
text-decoration:none;
width:5px;
height:42px;
margin-left:-2px;
border:none;

}

我的 Jquery 是

$(function () {

          $("#slider-range-Monday").slider({

              range: true,

              min: 0,

              max: 24,

              values: [0, 24],

              animate: 'slow',

              slide: function (event, ui) {

                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              }

          });

          $("#amount").val("$" + $("#slider-range").slider("values", 0) +

            " - $" + $("#slider-range").slider("values", 1));

});

我几乎可以肯定我在 css 中遗漏了一些东西。

谢谢

【问题讨论】：

向我们展示活生生的例子（也许是 jsfiddle？）
当然可以。我以前从未这样做过，所以我需要几分钟。
jsfiddle.net/Cwm76/Ehe3n
您需要将 jQuery 链接到您的 JSFiddle。这是correctly configured fiddle。
@SuperScript，谢谢，我现在才这样做。这是我第一次使用它。

标签： jquery css

【解决方案1】：

jQuery UI 为滑块句柄定义了默认的position:relative 和top: -2px。我需要做的就是删除它。

所以我在 CSS 中添加了：

div.ui-slider-horizontal .ui-slider-handle {
    ...
    top: 0;    /* override jQuery UI defaults */
}

它正在运行：JSFiddle。

【讨论】：

谢谢！它工作得很好。我什至没有想到“顶部”，非常感谢，我真的很感激。现在我要问另一个问题，但在我问之前我会看看我是否能弄清楚。我接下来要做的是添加一个标签来跟随每个手柄。我以前尝试过，但失败了。我尝试在其上方显示一个图例，我可以做到，但它没有正确间隔以与步骤对齐。
就是这样。现在我知道你为什么称自己为 SuperScript...现在，如果我愿意，我可以将标签更改为图像，并且标签上仍然显示句柄所在的步骤？
我尝试将滑块句柄的值放入标签中，但无法弄清楚。我以前见过这个解决方案，但不确定在哪里，因为我从来没有给它添加书签
我理解你的所作所为，你给了我很大的帮助，我很感激。我可以包装图像中呈现的值吗？我已经能够将句柄变成图像，如果我在 Flash 中制作图像并将其用作句柄，我可以在图像上获得值吗？
和另一个问题，我不希望你为我做这一切，但我找到了创建图例的代码，但我不确定该放在哪里。我在 Flash 中创造了一个传奇，但试图排列数字是一场噩梦。