Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use data-attr value for linear-gradient background

given this input

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%);
}
<input class="prettyRange" type="range" name="capability" data-percent="100%">

But if i'm trying to set the % via attr(data-percent) it doesn't work.

background: -webkit-linear-gradient(right, #fff 0%, green attr(data-percent), #fff 0%)

How can I use the data-percent property of the item?

PS: I want to use the data-property because I need to update this value using JS and we cannot select pseudo-elements with JS.

like image 320
Toni Michel Caubet Avatar asked Apr 20 '18 07:04

Toni Michel Caubet


1 Answers

An alternative is to use CSS variable that you can easily adjust with JS:

.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right,#fff 0%,green var(--p,50%), #fff 0%);
}
<input class="prettyRange" type="range" name="capability" style="--p:80%">
<br>
<input class="prettyRange" type="range" name="capability" style="--p:100%">
<br>
<input class="prettyRange" type="range" name="capability" >

Using JS to change the value:

document.querySelector('.prettyRange').addEventListener('input',function(e) {
  e.target.style.setProperty('--p', e.target.value*10+'%');
})
.prettyRange {
  -webkit-appereance: none;
}

.prettyRange::-webkit-slider-runnable-track {
  background: -webkit-linear-gradient(right, #fff 0%, green var(--p, 50%), #fff 0%);
}
<input class="prettyRange" min='1' max='10' type="range" name="capability">
like image 100
Temani Afif Avatar answered Oct 18 '22 17:10

Temani Afif