javascript - Customizing and positioning a vertical slider in HTML/CSS -

-

i'm trying create remote control app using cordova.

there should 2 vertical sliders (<input type="range">, customizations (height, width, color, etc.). 1 should on left, positioned @ 25% of page width; , other on right, @ 75% of page width.

the sliders should centered on correct point (ex. calc(25% - 20px); slider on left if 40px wide, be).

the other requirement webpage works on ios safari (really cordova, uses apple's webkit same). opera/firefox nice. it not have ie compatible (you're welcome).

i don't mind using javascript/jquery, prefer css.

also, reasons unexplained, sliders go off top of page, must fixed. 1 last bug have applying position: fixed; left: 0px; slider not move left, centerinviewport() function offset.

here's jsfiddle: https://jsfiddle.net/coder256/6zjnk3qt/

i tried -webkit-appearance: slider-vertical. doesn't allow styling. sliders, -webkit-appearance value aside none i've tried doesn't let style anything.

update: sorry if wasn't clear. question is: how correctly position sliders while keeping customization, correctly being not far off page , @ correct x position described above?

the trick set margin-topto half of sliders width keep sliders being far off page.

same principle x position. use calc set left 25% / 75% minus half of sliders width correct position.

html, body {margin: 0; padding: 0; width: 100%; height: 100%}    h1 {    text-align: center;  }    .app {    width: 100%;  }    .sliders {    position: relative;  }    input[type=range].vslider {    -webkit-appearance: none;    transform: rotate(270deg) translatey(-50%);    margin-top: 200px; /* 50% of width because of transformation */    width: 400px;    height: 40px;    outline: none;    position: absolute;  }    input[type=range].vslider::-webkit-slider-thumb {    -webkit-appearance: none;    background-color: #777;    opacity: 0.75;    width: 25px;    height: 40px;    transform: translatey(-10px);  }    input[type=range].vslider::-webkit-slider-runnable-track {    -webkit-appearance: none;    background-color: #444;    color: #444;    height: 20px;    width: 400px;  }    #lslider {    left: calc(25% - 200px); /* 50% of width because of transformation */  }    #rslider {    left: calc(75% - 200px); /* 50% of width because of transformation */  }
<div class="app">    <h1>rc car test</h1>    <div id="sliders">      <input type="range" min="-256" max="256" step="1" defaultvalue="0" class="vslider" id="lslider" />      <input type="range" min="-256" max="256" step="1" defaultvalue="0" class="vslider" id="rslider" />    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more