Using bootstrap-slider as dropdown menu

Profile picture for zzzhan
zzzhan

I'm using bootstrap-slider (http://www.eyecon.ro/bootstrap-slider/) with vertical orientation. Everything is ok, except using it as a dropdown menu.When I move the slider after dropdown, it is not the exact position where I press.Is it a bug? See the different between the normal and the dropdown one on jsfiddle

It looks like the slider doesn't like being inside of anything that has a position: relative; or position: absolute which is being applied by the .btn-group and .dropdown-menu respectively.

A very bad fix for this would be to get rid of those css properties, but yeah, it's probably a bug.

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
$(function () {
    $(".slider").slider();
});
<!-- language: lang-css --> 
.fix-position.btn-group,
.fix-position .dropdown-menu {
  position: initial !important;
}
<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class="container">
  <div class="row">

    <div class="col-xs-4">
      <h3>Working</h3>
      <input type="text" value="" class="slider"
             data-toggle="slider"
             data-slider-min="0" data-slider-max="100" 
             data-slider-step="1" data-slider-value="100" 
             data-slider-orientation="vertical" />

    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Broken</h3>
      <div class="btn-group btn-group-sm">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Working</h3>
      <div class="btn-group btn-group-sm fix-position">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>
    
  </div>
</div>
<!-- end snippet -->