如何使用 Bootstrap 在手柄上制作具有值的滑块？

Posted 2023-02-22

【中文标题】如何使用 Bootstrap 在手柄上制作具有值的滑块？

【英文标题】：How to make Slider with value on a handle using Bootstrap?

【发布时间】：2016-01-29 18:54:48

【问题描述】：

如何使用 Bootstrap 在句柄上制作具有值的滑块？ 或者在最坏的情况下使用 jQuery，但最可取的是 Twitter Bootstrap。

特别是我想要像 slider 这样的东西，但是在引导程序上

<div id="slider"></div>
$("#slider").slider(
    change: function() 
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    ,
    slide: function() 
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    
);

【问题讨论】：

Bootstrap 中没有滑块，你必须使用外部库。

我可以使用 AngularJS 吗？

AngularJS 只是一个动态 Web 应用程序的框架。它根本与滑块无关。

您好，请问您最后是否做到了？ npmjs.com/package/ngx-bootstrap-slider 是我能找到的最好的，但没有选项可以在滑动条内的范围之间放置文本

【参考方案1】：

官方引导网站引用：

“Bootstrap 是最流行的 html、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目。”

Bootstrap 用于响应式网页设计，这意味着您可以创建移动友好且响应式的布局。参考这个更好的理解：What is Bootstrap?

现在要真正实现你所需要的，你可以使用 jquery。按照这个你可能会找到你想要的东西：http://www.jqueryrain.com/demo/jquery-range-slider/

【讨论】：

谢谢！我更喜欢和AngularJS打交道，你知道我能不能用它来做吗？