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>

4

1 回答 1

-1

可能您使用的是 bootstrap 4。目前它不适用于此版本。使用 bootstrap 3 或者你必须将 bootstrap-slider 调整为新的 bootstrap。

于 2017-12-05T08:20:20.180 回答