CODEWITHSUNDEEP
htmlcss
Verox
Verox

Reputation: 360

Making input range slider take all available space

https://jsfiddle.net/a5gdhmfn/1/

<div>
    <i>O</i>
    <input type="range" />
    <button/>
    <div>...</div>
</div>

I have a range slider inside a div which contains other assorted elements. All other elements inside this div are fixed-width.

Currently the range slider is set as a percentage width which scales but leaves an increasingly large margin as the resolution of the page increases; The range slider should take up all available space left in the div while leaving the other elements where they are.

I'd like to know if there is any pure css/html way of achieving this goal.

Upvotes: 1

Views: 1230

Answers (1)

user2782001
user2782001

Reputation: 3488

You can add display flex to each element in your play bar. Then use

flex-grow:1;

on your slider bar.

Works in Firefox.

https://jsfiddle.net/a5gdhmfn/2/

Problem with flex is that it is only supported in the most modern browsers. And you have to use vendor prefixes to get it to work across the board.

-webkit-flex: 1; /* Safari 6.1+ */

-ms-flex: 1; /* IE 10 */

Upvotes: 1

Related Questions