0

我使用了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"]
 });
});

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

4

2 回答 2

1

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

例如：

<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="" />

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

于 2018-09-21T06:43:22.360 回答
0

你有：data-slider-ticks和data-slider-ticks-labels

如果您只想显示 Jan - Jun。您必须将其更改为：

  • data-slider-ticks="[1,2,3,4,5,6]"

  • data-slider-ticks-labels='["Jan","Feb","Mar","Apr","May","Jun"]'

于 2018-09-20T14:31:26.970 回答