CODEWITHSUNDEEP
bootstrap-4
Josh hall
Josh hall

Reputation: 27

Bootstrap slider, arrange value to the right

I would like to display the value of the slider to the right of the slider rather than underneath. If I move the div to a column, the slider does not work. I'm using bootstrap 4 with purpose theme. Any help appreciated. 

<div class="col-4">

                <!-- slider START -->

    <div class="input-slider-container mb-5">
        <div id="input-slider-red" class="input-slider input-slider--blue" data-range-value-min="10" data-range-value-max="100"></div>
        <span id="input-slider-red-value" class="range-slider-value" data-range-value-low="25"></span><span>&nbsp;miles</span>
    </div>     

                <!--slider END -->

screenshot

Upvotes: 0

Views: 689

Answers (1)

TJ Weems
TJ Weems

Reputation: 1114

you need to use the utilities classes provided by bootstrap or your own form of css.

<div class="input-slider-container mb-5 d-flex">
        <div id="input-slider-red" class="input-slider input-slider--blue" data-range-value-min="10" data-range-value-max="100"></div>
        <span id="input-slider-red-value" class="range-slider-value" data-range-value-low="25"></span><span>&nbsp;miles</span>
    </div>

Try adding d-flex to your input-slider-container div.

Upvotes: 2

Related Questions