代码之家  ›  专栏  ›  技术社区  ›  Ritesh Khatri

如何在引导范围滑块中选择反向范围?

  •  0
  • Ritesh Khatri  · 技术社区  · 6 年前

    我使用了引导范围滑块 bootstrap range slider i have 2 questions where i am totally stack.

    < Buff行情>

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

    < /块引用>

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

    < Buff行情>

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

    < /块引用>

    这是我的HTML代码,

    <input id=“ex1”type=“hidden”data clear delay=“true”data provide=“slider”data slider selection=“none”data slider value=“[0100]”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,36.36、45.45、54.54、63.63、72.72、81.81、90.90、100]“data val=”true“name=”preferred ou travel ou period“value=”/>
    < /代码> 
    
    

    而javascript是,

    jquery(函数($){
    $('ex1').slider({
    格式化程序:函数(值){
    返回;
    }
    id:“幻灯片12c”,
    标注方式:【最小值】,【最大值】
    (});
    (});
    < /代码> 
    
    

    请帮我摆脱困境,提前谢谢您。

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

    enter image description here

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

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

    这是我的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"]
     });
    });
    

    请帮我摆脱困境,提前谢谢你。

    2 回复  |  直到 6 年前
        1
  •  1
  •   Yunnosch    6 年前

    为了支持在新年选择月份范围,您可以简单地在两个普通年份之间制作一个滑块,而不是只覆盖一个普通年份以上的月份范围。

    例如。:

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

    它总是一个观点什么是“直观的”,但我认为这比任何反概念都好,例如“请选择你不想使用的月份”。

        2
  •  0
  •   user9026111    6 年前

    你有: data-slider-ticks data-slider-ticks-labels

    如果您只想显示一月到六月,您必须将其更改为:

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

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

    推荐文章