Question

bootstrap-slider工作，按预期显示，但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>

Answer 1

可能你使用bootstrap 4.现在它不能使用这个版本。使用bootstrap 3或者你必须将bootstrap-slider调整为新的bootstrap。

rangeHighlights没有显示bootstrap-slider

1 个答案: