问使用引导程序滑块时rangeHighlights不显示
EN

Stack Overflow用户

提问于 2017-11-21 07:01:23

回答 1查看 521关注 0票数 0

引导程序-滑块工作正常，按预期显示，但rangeHighlights似乎未出现。

将http://seiyria.com/bootstrap-slider中的html/css/js代码复制到我的项目中，就像它在网站上一样。

我在这里做错了什么？

$('#ex22').slider({
  id: 'slider22',
  min: 0,
  max: 20,
  step: 1,
  value: 14,
  rangeHighlights: [{
      "start": 2,
      "end": 5,
      "class": "category1"
    },
    {
      "start": 7,
      "end": 8,
      "class": "category2"
    },
    {
      "start": 17,
      "end": 19
    },
    {
      "start": 17,
      "end": 24
    },
    {
      "start": -3,
      "end": 19
    }
  ]
});

#slider22 .slider-selection {
  background: #2196f3;
}

#slider22 .slider-rangeHighlight {
  background: #f70616;
}

#slider22 .slider-rangeHighlight.category1 {
  background: #FF9900;
}

#slider22 .slider-rangeHighlight.category2 {
  background: #99CC00;
}

<!DOCTYPE html>
<!-- saved from url=(0036)http://seiyria.com/bootstrap-slider/ -->
<html lang="en" style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link href="http://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
  <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet" />
</head>

<body>



  <div id="example-22" class="slider-example">
    <input id="ex22" type="text" data-slider-id="slider22" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-rangeHighlights='[{ "start": 2, "end": 5, "class": "category1" },
                                   { "start": 7, "end": 8, "class": "category2" },
                                   { "start": 17, "end": 19 },
                                   { "start": 17, "end": 24 }, //not visible -  out of slider range
                                   { "start": -3, "end": 19 }]' />
  </div>


  <script src="http://seiyria.com/bootstrap-slider/dependencies/js/jquery.min.js"></script>

  <script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>

</body>

</html>

bootstrap-slider

回答 1

Stack Overflow用户

发布于 2017-12-05 16:20:20

你可能用的是bootstrap 4，目前它不能在这个版本上工作。使用bootstrap 3，否则您必须将bootstrap滑块调整为新的bootstrap。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47402564

复制

相似问题

问使用引导程序滑块时rangeHighlights不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用引导程序滑块时rangeHighlights不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用引导程序滑块时rangeHighlights不显示
EN