html - 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 range slider inside div contains other assorted elements. other elements inside div fixed-width.

currently range slider set percentage width scales leaves increasingly large margin resolution of page increases; range slider should take available space left in div while leaving other elements are.

i'd know if there pure css/html way of achieving goal.

you can add display flex each element in play bar. use

flex-grow:1; 

on slider bar.

works in firefox.

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

problem flex is supported in modern browsers. , have use vendor prefixes work across board.

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

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


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -