CODEWITHSUNDEEP
javascripttwitter-bootstrapslider
That1guyoverthr
That1guyoverthr

Reputation: 1131

Bootstrap range slider css bug

Eyecon's Bootstrap range slider draws multiple sliders on top of each other. See bug in action here: http://jsfiddle.net/GqMHM/

I've taken source code from the authors site, as well as example on this site: http://www.qualitylink.com.br/slider/slider.html

For the life of me I cannot figure out why I'm seeing this css bug in all my test environments.

<!-- Notice this exact example works perfectly@ http://www.qualitylink.com.br/slider/slider.html -->
<html>
<head>
    <meta charset="utf-8">
    <title>Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.qualitylink.com.br/slider/css/bootstrap.slider.css">
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $('.slider').slider({
                min: 5,
                max: 500,
                step: 5,
                value: [5,200]
            });
            $('.tooool').tooltip();
        });
    </script>
</head>
<body>
    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>

        <div class="modal-body">
            <br><br>

            <div class="slider slider-horizontal" style="width: 220px;">
                <div class="slider-track"><div class="slider-selection" style="left: 0%; width: 27.272727272727273%;"></div>
                <div class="slider-handle round" style="left: 0%;"></div>
                <div class="slider-handle round" style="left: 27.272727272727273%;"></div>
            </div>
            <div class="tooltip top" style="top: -24px; left: 5.5px;">
                <div class="tooltip-arrow"></div><div class="tooltip-inner">5 : 140</div>
            </div>
            <input type="text" class="slider" style="">
        </div>

            <br><br>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>

    <script src="http://www.qualitylink.com.br/slider/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.qualitylink.com.br/slider/js/bootstrap.slider.js"></script>
</body>
</html>

Upvotes: 0

Views: 7951

Answers (1)

mg1075
mg1075

Reputation: 18155

It's a tad difficult to tell from your question what you are trying to do, but here's a fork of your fiddle that I presume is what you were expecting to see.

http://jsfiddle.net/Aq6fu/

The only change was this: eliminating all the extra html markup you added to your original fiddle. 

<input type="text" class="slider" style="" />

I am guessing here, but maybe instead of doing a view-source, you did an inspect element with google chrome, and copied the generated markup instead of the original html markup.

The original markup only has one element with the .slider class, but the generated markup has two elements with the .slider class.

If you view-source for the link in your question - view-source:http://www.qualitylink.com.br/slider/slider.html - you can see the html on that page does not have all the extra markup in your question. Again, that extra markup is what is generated by the plugin after manipulating the DOM; it's not the original source html.

If you are calling $('.slider').slider({, then the plugin would be invoked for multiple elements, which was probably not your intention.

Upvotes: 2

Related Questions