javascript - How can I use a different color to fill the left side of the input[type="range"] in chrome using CSS? -

-

as can see below in ie slider working, can't find "ms-fill-lower" pseudo-code in chrome/firefox. haven't figured out how can print out number continously above thumb (i thinking creating new childnode in js , using position of slider + current value of thumb , info create new position brand new childnode. there easier way maybe?)

<!doctype:html>  <html>    <head>    <style>      input {        position: fixed;        top: 40;        right: 40;      }            input[type=range] {        -webkit-appearance: none;        margin: 30px 0px;        width: 80%;      }            input[type=range]:focus {        outline: none;      }            input[type=range]::-ms-thumb {        box-shadow: 0px 0px 0px #ffccff, 0px 0px 0px #ffccff;               height: 30px;        width: 48px;        background-image: url('https://scontent-vie1-1.xx.fbcdn.net/hphotos-xpa1/v/t34.0-12/12204684_1096899726988871_1886399559_n.jpg?oh=b8481694391b1a5ebe58733f0638a08f&oe=563669c2');        cursor: pointer;        -webkit-appearance: none;        margin-top: 0px;      }            input[type=range]::-ms-track {        width: 100%;        height: 30px;        cursor: pointer;        animate: 0.2s;        background: transparent;        border-color: transparent;       color: transparent;      }            input[type=range]::-ms-fill-lower {        background: #ff0000;        border: 0.2px solid #ff0000;         }            input[type=range]::-ms-fill-upper {        background: #ffccff;                }            input[type=range]:focus::-ms-fill-lower {        background: #ff0000;      }            input[type=range]:focus::-ms-fill-upper {        background: #ffccff;      }    </style>  </head>    <body>    <input type="range"></input>  </body>    </html>

pseudo elements chrome ::-webkit-slider-thumb , ::-webkit-slider-runnable-track firefox ::-moz-range-thumb , ::-moz-range-track print number continuously 

<input type="range" max="22" min="12" value="18" step="2" oninput="dataupdate()" id="myinput" /> <p id="mydata"></p>  <script>  function dataupdate(){    var x = document.getelementbyid("myinput").value;    document.getelementbyid("mydata").innerhtml=x;  } </script>

where value current position of range on load, step difference between each value, oninput event trigger when you'll move range's thumb , output displayed in <p> tag

to check pseudo elements in chrome can read http://webcomponents.org/articles/introduction-to-shadow-dom/


Comments

Post a Comment

Popular posts from this blog

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

-
i trying create customuser django project email username , add radio button truck , company. in registration process email-id registered per truck or company. mentioned radio button 'tag' , add manytomany field tag in emailuser model. when makemigrations, raising error : (fields.e300) field defines relation model 'abstractemailuser' either not installed, or abstract. i quite new django , not sure whether have created correct code wants. please me solving this. here code, models.py: import django django.contrib.auth.models import ( abstractbaseuser, baseusermanager, permissionsmixin) django.core.mail import send_mail django.db import models django.utils import timezone django.utils.translation import ugettext_lazy _ class emailusermanager(baseusermanager): """custom manager emailuser.""" def _create_user(self, email, password, is_staff, is_superuser, **extra_fields): """create , save emailus...
Read more

matlab - error with cyclic autocorrelation function -

-
Image
i'm trying code cyclic autocorrelation function in matlab follows: t=0:(n-1); t=t*te; i_alpha=0; tau=-n2*te:te:n2*te; alpha=-1/2:1/n:1/2; ryy_cl=zeros(length(alpha),length(tau)); alpha=alpha/te ind_tau=0; i_alpha=i_alpha+1; k=tau ind_tau=ind_tau+1; if k>0 % ryy_cl(i_alpha,ind_tau)=1/length(sig_bin_syl_mod(1:end- k))*sum((sig_bin_syl_mod(1:end-k)).*sig_bin_syl_mod(k+1:end)).*exp(1i*2*pi*alpha*t(1+k:length(sig_bin_syl_mod(1:end)))); ryy_cl(i_alpha,ind_tau)=(1/n)*sum((sig_bin_syl_mod(1:end-k)).*sig_bin_syl_mod(k+1:end)).*exp(-1i*2*pi*alpha*t(1:end-k)); else ryy_cl(i_alpha,ind_tau)=(1/n)*sum((sig_bin_syl_mod(1-k:end)).*sig_bin_syl_mod(1:end+k)).*exp(-1i*2*pi*alpha*t(1-k:end)); end end end i'm getting errors, , doesn't show expecting. according below formulae, how can fix it? the code provided incomplete, difficult confidently reproduce error. in particular, haven't de...
Read more

php - Using grpc in Laravel, "Class 'Grpc\ChannelCredentials' not found." -

-
i trying use grpc in laravel project. this part of composer.json file: "require": { ... "datto/protobuf-php": "dev-master", "google/auth": "^0.7.0", "grpc/grpc": "dev-release-0_13", ... } i have generated php file proto file. placed in app/services/ , included in composer.json autoload.files section. have run composer install without issues. i have created route testing. has following code: $client = new vat_service\vatserviceclient('localhost:50051', [ 'credentials' => grpc\channelcredentials::createinsecure() ]); but receive response class 'grpc\channelcredentials' not found. when visit route. the laravel app running in homestead vagrant box. i don't know how proceed. missing dependency? did miss install something? i have solved problem, not sure of below steps solution. things tried: i installed grpc-beta in homestead box (...
Read more