javascript - Fill gradient from left to right -

i have volume slider in custom htm5 player doing , have problem, when drag volume slider thumb, behind should blue, background color coming bottom. tried: how rotate background in css?

but disappeared completely. use javascript find out how many steps dragged:

function updateslider(slideamount) {   mediaplayer.volume = slideamount;   $('#volumeamount').css('background-position', '0 '+ slideamount*100 +'%'); } 

and html:

<input class="volume-slider" id="volumeamount" type="range" value="1" max="1" step="0.01" onchange="updateslider(this.value)" name="center"style="position:relative; left:40%; top:19%;"/> 

and css:

#volumeamount{   width: 60px;   position:absolute;   top:10%;   left:30%;   margin: 0.8em 0.0em 0.0em; } #volumeamount:after{   -webkit-transform: skew(90deg, 0deg);   background-size: 100% 200%;   background-image: linear-gradient(to bottom, whitesmoke 50%, #90c7e0  50%); } 

it new version question here had:

#volumeamount{   width: 60px;   position:absolute;   top:10%;   left:30%;   margin: 0.8em 0.0em 0.0em;   -webkit-transform: skew(90deg, 0deg);   background-size: 100% 200%;   background-image: linear-gradient(to bottom, whitesmoke 50%, #90c7e0 50%); } 

and images:

why gradient fill bottom?

it filling bottom because of combination of actual gradient , positioning:

• the gradient to bottom gradient , top half have color whitesmoke , bottom half have color #90c7e0.
• on slide, position of gradient being increased in y-axis , naturally moving towards either side.

the below snippet demo div element + animation (for simplicity) of problematic code.

div {    width: 200px;  /* changed demo */    height: 100px;  /* demo */    background-size: 100% 200%;    background-image: linear-gradient(to bottom, whitesmoke 50%, #90c7e0 50%);    animation: fill 2s ease infinite;  /* demo */  }  @keyframes fill {    {      background-position: 0 100%;    }  }

<div>hello</div>

---

how make fill left right?

you can make fill left right doing following changes:

• change gradient to bottom gradient to right gradient fill should go left right.
• change background-size of gradient such 200% in x-axis , 100% in y-axis.
• on slide, decrease position of element in x-axis (that is, make go -100% 0).

below demo of fixed code. i've again done div , animations should easy understand changes , adapt slider (since slider working).

div {    width: 200px;  /* changed demo */    height: 100px;  /* demo */    background-size: 200% 100%;    background-image: linear-gradient(to right, whitesmoke 50%, #90c7e0 50%);    animation: fill 2s ease infinite;  /* demo */  }  @keyframes fill {    {      background-position: -100% 0;    }  }

<div>hello</div>