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.





    $(function () {
        $(".slider").slider();
    });



    .fix-position.btn-group,
    .fix-position .dropdown-menu {
      position: initial !important;
    }



    <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>

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`][1]


  [1]: http://jsfiddle.net/zzzhan/zvdc951a/