Javascript 不带jquery mobile的滑块工具提示扩展

我想模仿jquerymobile的做法，但不加载库。只使用jquery和jquery ui（如果我知道如何在没有它的情况下创建滑块，我可能会停止使用jquery ui）

我想在滑块句柄（ui.handle）内部以及句柄上方的div中显示滑块值（ui.value），如第三个示例中所示（两个选项一起）：

var initialValue=5；
$（“#滑块”）.滑块({
民:1,，
最高：50，
value:initialValue，
开始：功能（事件、用户界面）{
$（ui.handle）.find（'.ui滑块工具提示'）.show（）；
},
停止：功能（事件、用户界面）{
$（ui.handle）.find（'.ui滑块工具提示'）.hide（）；
},
幻灯片：功能（事件、用户界面）{
$（ui.handle）.find（'.ui滑块工具提示'）.text（ui.value）；
$（ui.handle）.text（ui.value）；
},
创建：函数（事件、用户界面）{
变量工具提示=$（''）.css({
位置：'绝对'，
前-25，
左:0,，
边框：“1px灰色”
});
$（event.target）.find（'.ui滑块句柄'）.append（工具提示）；
$（'.ui滑块句柄'）.text（初始值）；
}
});

但由于某些未知原因，操纵滑块控制柄会阻止向其追加任何内容或显示/隐藏它

我也很难设置工具提示的边框，当检查代码时，它会自动添加一个边框，我不知道为什么。。。（jquery ui ofc但为什么？）

我只想要像jquery mobile这样的东西

---

我本来打算用一个奇特的文本阴影来做，但那是行不通的。我可以添加另一个内部DIV，并将其附加在工具提示DIV之后。默认情况下，工具提示DIV和内部DIV中都包含initialValue。幻灯片事件现在更新内部和工具提示div

边框未显示的问题只是缺少边框类型（例如，实心）。我没有在工具提示或内部添加任何样式，这将由您决定

$(document).ready(function () {
     var initialValue = 5;

     $("#slider").slider({
         min: 1,
         max: 50,
         value: initialValue,
         start: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').show();
         },
         stop: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').hide();
         },
         slide: function( event, ui) {
             $(ui.handle).find('div').text(ui.value);
             //$(ui.handle).text(ui.value);
         },
         create: function( event, ui ) {
              var tooltip = $('<div class="ui-slider-tooltip" />').css({
                 position: 'absolute',
                 top: -25,
                 left: 0,
                 border: '1px solid gray',
                 display: 'none'
             }).text(initialValue);
             var inner = $('<div class="ui-slider-inner" />').css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 display: 'block'
             }).text(initialValue);
             $(event.target).find('.ui-slider-handle').append(tooltip).append(inner);
             //$('.ui-slider-handle').text(initialValue);
         }
    });
});

$（文档）.ready（函数（）{
var初始值=5；
$（“#滑块”）.滑块({
民:1,，
最高：50，
value:initialValue，
开始：功能（事件、用户界面）{
$（ui.handle）.find（'.ui滑块工具提示'）.show（）；
},
停止：功能（事件、用户界面）{
$（ui.handle）.find（'.ui滑块工具提示'）.hide（）；
},
幻灯片：功能（事件、用户界面）{
$（ui.handle）.find（'div'）.text（ui.value）；
//$（ui.handle）.text（ui.value）；
},
创建：函数（事件、用户界面）{
变量工具提示=$（''）.css({
位置：'绝对'，
前-25，
左:0,，
边框：“1px纯色灰色”，
显示：“无”
}).文本（初始值）；
变量内部=$（''）.css({
位置：'绝对'，
排名：0，
左:0,，
显示：“块”
}).文本（初始值）；
$（event.target）.find（'.ui滑块句柄'）.append（工具提示）.append（内部）；
//$（'.ui滑块句柄'）.text（初始值）；
}
});
});

---

jshiddle:

谢谢，我尝试了一些css，它可以工作，但是我无法使内部div文本在中间对齐：另外，你知道如何在句柄的左侧添加高亮显示吗？就像进度条一样，我不知道它的名字……好吧，忘记第二个问题：只需添加“范围：'分钟'，”。很高兴我能帮上忙。如果您还没有弄清楚，可以通过添加left:0和right:0；使内部DIV对齐中心；。因为它是绝对定位的，所以它将延伸到它的容器。这是一个很好的解决方案，因为它不依赖于容器大小：

$(document).ready(function () {
     var initialValue = 5;

     $("#slider").slider({
         min: 1,
         max: 50,
         value: initialValue,
         start: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').show();
         },
         stop: function( event, ui ) {
             $(ui.handle).find('.ui-slider-tooltip').hide();
         },
         slide: function( event, ui) {
             $(ui.handle).find('div').text(ui.value);
             //$(ui.handle).text(ui.value);
         },
         create: function( event, ui ) {
              var tooltip = $('<div class="ui-slider-tooltip" />').css({
                 position: 'absolute',
                 top: -25,
                 left: 0,
                 border: '1px solid gray',
                 display: 'none'
             }).text(initialValue);
             var inner = $('<div class="ui-slider-inner" />').css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 display: 'block'
             }).text(initialValue);
             $(event.target).find('.ui-slider-handle').append(tooltip).append(inner);
             //$('.ui-slider-handle').text(initialValue);
         }
    });
});