首页 > 解决方案 > 如何在 Bootstrap 范围滑块中选择反向范围?

问题描述

我使用了Bootstrap 范围滑块,我有 2 个问题完全被卡住了。

我的问题是如何选择反向范围,就像我有一个值为 1 到 10 的滑块然后我必须选择 9 到 3 我该怎么做?

在此处输入图像描述

在这里,我有一个带有月份范围的滑块,我想选择像 oct - feb 我该怎么做???

另一个问题是如何添加两个手柄的标签?

这是我的html代码,

<input id="ex1" type="hidden" data-clear-delay="true" data-provide="slider" data-slider-selection="none" data-slider-value="[0,100]" data-slider-ticks="[1,2,3,4,5,6,7,8,9,10,11,12]" data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]' data-slider-ticks-positions="[0, 9.09, 18.18, 27.27, 36.36, 45.45, 54.54, 63.63, 72.72, 81.81, 90.90, 100]" data-val="true" name="prefered_travel_period" value="" />

而javascript是,

jQuery(function($) {
  $('#ex1').slider({
    formatter: function(value) {
        return ;
    },
    id: "slider12c",
    labelledby:["min","max"]
 });
});

请帮我解决这个问题,在此先感谢您。

标签: jqueryhtmlrangesliderbootstrap-slider

解决方案


为了支持选择跨新年的月份范围,您可以简单地制作一个跨两个通用年份的滑块,而不是仅覆盖一个通用年份的月份范围。

例如:

<input id="ex1" type="hidden" data-clear-delay="true" data-provide="slider" data-slider-selection="none" data-slider-value="[0,100]" data-slider-ticks="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]" data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan2","Feb2","Mar2","Apr2","May2","Jun2","Jul2","Aug2","Sep2","Oct2","Nov2","Dec2"]' data-slider-ticks-positions="[0, 4.34, 8.69, 13.04, 17.39, 21.73, 26.08, 30.43, 34.78, 39.13, 43.47, 47.82, 52.17, 56.52, 60.86, 65.21, 69.56, 73.91, 78.26, 82.60, 86.95, 91.30, 95.65, 100]" data-val="true" name="prefered_travel_period" value="" />

什么是“直觉”始终是一种观点,但我认为这比任何反向概念都要好,例如“请选择您不想使用的月份”。


推荐阅读