模态体中的无线电到滑块无法正确显示

Question

我正在使用无线电到滑块插件。

显示模态时，滑块无法正确显示

错误：

但如果我手动调整窗口大小并将其恢复到正常状态，一切都处于完美的位置。

完美：

<a data-toggle="modal" href="#modal1">Open Modal</a>
<div class="modal fade customModal" id="modal1" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="panel panel-default" style="border: none;">
                <div class="panel-heading bg-color-1 border-color-1">
                    <h3 class="panel-title">Title</h3>
                </div>
                <div class="panel-body">
                    <form action="#" method="POST" role="form" id="form1">
                        <label for="cbOptions">Select</label>
                        <div class="form-group formField">
                            <select class="form-control selectpicker"id="cbOptions" required></select>
                        </div>

                        <label>Slider</label>
                        <div class="form-group formField">
                            <div data-toggle="buttons">
                                <input type="checkbox" data-toggle="toggle" class="opciones" data-style="android" data-on="8" data-off="8" data-onstyle="info">
                                <input type="checkbox" data-toggle="toggle" class="opciones" data-style="android" data-on="9" data-off="9" data-onstyle="info">
                                <input type="checkbox" data-toggle="toggle" class="opciones" data-style="android" data-on="10" data-off="10" data-onstyle="info">
                            </div>
                        </div>
                        <div id="radios">
                            <input id="option1" name="options" type="radio">
                            <label for="option1">8</label>
                            <input id="option2" name="options" type="radio">
                            <label for="option2">9</label>
                            <input id="option3" name="options" type="radio">
                            <label for="option3">10</label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Radios to slider CSS
      Radios to slider JS

示例错误：Codepen Example
示例修复：Codepen Example

Answer 1

更新：无线电到滑块需要一个功能来初始化单选按钮。我将此函数放在显示的模态事件中，现在滑块显示正确。

抱歉我的英语不好。

$('#myModal').on('shown.bs.modal', function () {
    $('#radios').radiosToSlider();
});