Skip to content

Slider bar initialisation doesn't work when not visible #2

@guillomovitch

Description

@guillomovitch

The following test case shows the issue, with a radio slider on a hidden tab panel. A workaround is to delay slider initialisation at tab activation, but that's a bit of pain.

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/radioslider@1.0.0-beta.1/dist/radioslider.min.css">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        <script src="https://unpkg.com/radioslider@1.0.0-beta.1/dist/jquery.radioslider.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $("#tabs").tabs();
                $("#radios").radioslider();
            });
        </script>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
            </ul>
            <div id="tabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-2">
                <div id="radios">
                    <input id="option1" name="options" type="radio" value="1">
                    <label for="option1">Nice</label>

                    <input id="option2" name="options" type="radio" value="2" checked>
                    <label for="option2">Super</label>

                    <input id="option3" name="options" type="radio" value="3">
                    <label for="option3">Extra</label>
                </div>
            </div>
        </div>
    </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions