I have a view with a table containing list of charges. I show a check mark image as one of the column. It is defined as input type as checkbox. The user can check/uncheck by clicking the column. he check mark image does not show up in IE8 at all. Following is the relevant inline css/script in the view (.cshtml).
input[type=checkbox].css-checkbox + label.css-label
{
padding-left: 25px;
height: 25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
}
input[type=text].css-text
{
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=text].css-text + label.css-textlabel
{
padding-left: 25px;
height: 25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
background-image: url(../images/checkmark.png);
}
input[type=checkbox].css-checkbox:checked + label.css-label
{
background-image: url(../images/check-mark-sm.png);
}
input[type=checkbox].css-checkbox.checked + label.css-label
{
background-image: url(../images/check-mark-sm.png);
}
.css-label
{
background-image: url(../images/checknomark.png);
}
The table in the view is loaded by reading the model in the view. Following is the code:
#for (int i = 0; i < Model.OpenCharges.Count; i++)
{
var style = (i + 1) % 2 != 0 ? "background1" : "background2";
var status = #Model.OpenCharges[i].Status;
var disabled = status != "Open" ? "disabled" : "checked=\"checked\" ";
<td style="padding: 5px;" class="body #style">
<input id="OpenCharges-Checkbox-#i" class="css-checkbox" type="checkbox" value="#Model.OpenCharges[i].AmountRemaining" IdForRecord="#Model.OpenCharges[i].Id" #disabled />
<label for="OpenCharges-Checkbox-#i" class="css-label"></label>
</td>
<td>
</td>
</tr>
}
For some reason, the check mark is not visible in IE8. I have spent long hours and nothing works for me. The same code works on all other browsers and versions of IE >8. Any ideas what I need to do?
Following things were attempted before posting this question:
Changed background-image:url to background:transparent url()
Used <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to make a script, to automate my game.
First look my snippet demo to finding out how my games works.
I know this request is a bit confusing but please help
var randomNumber = randomNumberFromRange();
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function() {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button,
#Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);
;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1,
#Gem,
#getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
we have important parameters here.
Gem Chance :
Gems :
I want to create a script to do
1 - click buttons by random(left & right) every 2 sec . (click)
2 - after losing 3 times (continuous) , change the Gem chance to X (X=2)
3 - click
4 - if win => reset => change Gem chance to 1
and start from part 1;
5 - if lose => change Gem chance to 1
and click ;
if lose = > change Gem chance to 2X
click ;
if win :
reset => change Gem chance to 1
and start from part 1
if lose :
change Gem chance to 1
click ;
if win : reset
but ( after 3 losing changes the Gem chance to last lose value )
last example:
After we reached 3 consecutive losses
After each loss
The chance of a gem becomes 1. And click.
And again the chance of gem
It doubles and clicks.
This will happen until we win.
But if between losses
When the gem chance.
He gave us the victory over the number 1
All steps are performed from the beginning with the difference that
Since the chance of gem. It's doubling its last loss.
I give you the code to begin to build what you want, its the routine which launch every 2 sec the function automate and click randomly on left or right button.
var randomNumber = randomNumberFromRange();
//begin to automate
var timer = setInterval(automate, 2000);
var buts=[$("#Left_button"), $("#Right_button")];
var win = 0;
var loose = 0;
var loop = 0;
function automate(){
var idx=randomNumberFromRange(0, 1);
buts[idx].trigger("click");
console.log("i click on " + buts[idx].attr("id"));
console.log("i " + $("#Place div[style='display: block;']").attr('id'));
$("#inp1").val("111");//sample to modify the value of Gem chance
if(loop++ == 4) clearInterval(timer);//stop call the function after some loop
}
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function () {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button, #Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1, #Gem, #getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to get the Xpath of the code but its showing not clickable.
I tried in chrome console and somehow make the xpath clickable but dont know how to use the xpath in selenium code.
In chrome console it work if you write like this
$x("//*[#id='no-voucher-id']")[0].click()
Here is my code:
#FindBy(xpath = "//input[#id='no-voucher-id']")
private lateinit var selectedNoVoucher: FluentList<FluentWebElement>
selectedNoVoucher.click();
HTML CODE:
<div className="Voucher-container-section" >
<div className="radio-item">
<input type="radio" id="yes-voucher-id" name="voucher" value="Yes"/>
<label For="yes-voucher-id">Yes</label>
</div>
<div className="radio-item">
<input type="radio" id="no-voucher-id" name="voucher" value="No"/>
<label htmlFor="no-voucher-id">No</label>
</div>
</div>
css
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #FFFFFF;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #EE4823;
}
Error Message:
org.openqa.selenium.TimeoutException: Expected condition failed: Element [[ChromeDriver: chrome on Ubuntu] -> xpath: //input[#id='no-voucher-id']] is not clickable (tried for 15 second(s) with 500 MILLISECONDS interval)
I expect the output is the radio button should be clickable
If the element is in the view point then you can use this selector :
I would recommend you to use ID over xpath or any other locator :
for clicking on Yes radio button : yes-voucher-id
#FindBy(id="yes-voucher-id")
var selectedNoVoucher
selectedNoVoucher.click();
Just make sure that the ID should be unique.
You can replace the id for No button in similar way.
let slider = document.getElementById("slider");
let rightBtn = document.getElementById("rightbutton");
let leftBtn = document.getElementById("leftbutton");
let element = document.getElementById("elementtype").innerHTML;
let celciusBoiling = document.getElementById("celciusboiling").value;
let chlorine = ["Chlorine", 100, 200];
function moveSliderRight() {
if (rightBtn.onclick) {
slider.value++;
}
}
function moveSliderLeft() {
if (leftBtn.onclick) {
slider.value--;
}
}
function main() {
moveSliderRight();
moveSliderLeft();
if (slider.value == parseInt(2)) {
element = chlorine[0];
celciusBoiling = chlorine[1];
}
}
main();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: peachpuff;
}
header {
width: 90%;
margin: 10px auto 0px;
}
header h1 {
text-align: center;
border: 1px solid black;
padding: 15px 0px;
}
.navbar {
width: 75%;
margin: 50px auto 50px;
padding: 10px 0px;
display: flex;
justify-content: space-around;
border: 1px solid black;
}
.navlinks {
border-right: 1px solid black;
width: 50%;
text-align: center;
display: block;
}
#nav3 {
border: none;
}
#intro {
margin: 0px auto 50px;
width: 40%;
text-align: center;
}
#slider {
-webkit-appearance: none;
background-color: grey;
width: 90%;
display: block;
margin: auto;
}
#slider::-webkit-slider-thumb {
cursor: pointer;
}
#slider::-moz-range-thumb {
cursor: pointer;
}
#valuetag {
text-align: center;
margin-top:25px;
}
h2 {
text-align: center;
font-size: 45px;
text-decoration: underline;
}
#display {
width: 90%;
margin-left: 50px;
margin-bottom: 50px;
font-size: 40px;
}
#display div {
display: inline-block;
width: 45%;
text-align: center;
}
span {
font-size: 15px;
}
.boiling {
margin-left: 6%;
}
.boilingpointslider {
text-align: center;
}
button {
margin: 20px 20px 20px 0px;
width: 75px;
}
<header>
<h1>Periodic Table Gases - Interative Slider</h1>
<nav>
<div class="navbar">
<div class="navlinks">Boiling Point</div>
<div class="navlinks" id="nav3">Melting Point</div>
</div>
</nav>
</header>
<div id="intro">
<p>Interact with the slider buttons to view the displayed properties held by gases, within the periodic table of elements.</p>
</div>
<h2 id="elementtype">Hydrogen</h2>
<div id="display">
<div class="boiling">
<h2>Boiling Point</h2>
<input id="celciusboiling" type="number" value="0"><span>℃</span>
<input id="fahrenboiling" type="number"><span>℉</span>
<input id="kelvinboiling" type="number"><span>K</span>
</div>
<div class="melting">
<h2>Melting Point</h2>
<input id="celciusmelting" type="number"><span>℃</span>
<input id="fahrenmelting" type="number"><span>℉</span>
<input id="kelvinmelting" type="number"><span>K</span>
</div>
</div>
<input type="range" min="0" max="9" value="0" id="slider">
<div class="boilingpointslider">
<button id="leftbutton" onclick="moveSliderLeft()">Left</button>
<button id="rightbutton" onclick="moveSliderRight()">Right</button>
</div>
I am having issues transferring a value to an input field.
Within the snippet linked their is a heading with the value hydrogen and to the bottom left their is a boiling point heading with a input field for celcius.
I'm trying to achieve a scenario whereby you move the slider along using the buttons and at each value the heading changes to a different element and the input value for just the celcius boiling point changes.
I can't get this to work though. The buttons are working to make the slider move left and right, but for whatever reason i cant get the value to appear within the input field or change the heading. I've displayed the code i have already to get the buttons to move the slider and a snippet of what i thought would allow the changes i want to take place when the slider value changes to 2. I cant get it to to work though
Thanks.
You don't show your HTML, but I presume that slider is an input (text or hidden).
The value attribute is a string, even if you assign it a number, so you need to first convert it to a integer if you want to increment or decrement it, like so:
slider.value = parseInt(slider.value)++ // or --
Note that also you are trying to parseInt(2) down in your main(), which makes no sense as 2 is already an integer.
im trying to make a average grade calculator, now thats is going fine but now i want to calculate the average immediately when a number gets inputted in one of the fields. I've been trying this with "on(), live(), onkeyup()" but can't get it to work.
The result of the average now displays beneath the inputfields 'onclick' on the button. I want the average displayed there but then as soon as you input numbers in one of the fields it should show there as it now does after the onclick.
What i've tryed with the 'on(), live(), onkeyup()' is to connect them to the input fields and connect them to the calculator() function.
Is there a easy way to do this or a other certain way?
greetings.
function calculator() {
var weight = 0;
var mark = 0;
var weights = document.querySelectorAll('[id^=weight-]');
var grades = document.querySelectorAll('[id^=mark-]');
var trs = document.getElementsByTagName('tr');
var tBody = document.getElementsByTagName('tbody')[0];
var totalWeight = 0;
var totalGrade = 0;
for (var i = 0; i < weights.length; i++) {
totalWeight += +weights[i].value;
}
for (var i = 0; i < grades.length; i++) {
totalGrade += +grades[i].value;
}
var finalGrade=totalGrade/totalWeight;
var display = document.getElementById('output-div');
var newTr = document.createElement('TR');
newTr.innerHTML = `<td><input id="weight-${trs.length + 1}" type="text" size=2 value=""></td><td><input id="mark-${trs.length + 1}" type="text" size=2 value=""></td>`;
tBody.appendChild(newTr);
display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2);
}
html {
background-color: ;
}
header {
background-color: ;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
}
table {
margin: auto;
}
tr {
background-color: ;
}
td {
background-color: ;
}
#table-title {
font-size: 20px;
font-style: italic;
text-align: center;
position: relative;
}
input {
text-align: center;
}
[id^="mark"] {
width: 100px;
}
[id^="weight"] {
width: 100px;
}
#calc-btn-div {
position: relative;
width: 150px;
margin: auto;
}
#calc-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#calc-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* #add-input-div {
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
#add-input-btn {
position: relative;
padding: 5px;
margin-top: 20px;
}
#add-input-btn:hover {
border-color: black;
box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
} */
#output-div {
background-color: ;
height: 50px;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<header>
<h2>Gemiddelde cijfer</h2>
<h3>Voer hieronder je cijfers in</h3>
</header>
<body>
<table id="table">
<tr id="table-title">
<td>Weging</td>
<td>Cijfer</td>
</tr>
<tr>
<td><input id="weight-1" type="text" size=2 value=""></td>
<td><input id="mark-1" type="text" size=2 value=""></td>
</tr>
</table>
<div id="calc-btn-div">
<input id="calc-btn" type="button" value="Berekenen je gemiddelde" onclick="calculator()">
</div>
<!-- <div id="add-input-div">
<input id="add-input-btn" type="button" value="Voeg cijfer toe" onclick="addInput()">
</div> -->
<div id="output-div"></div>
</body>
</html>
Using vanilla JavaScript I would attach an eventListener to the inputfields like this
document.getElementById('weight-1').addEventListener('change',function(){
calculator();
});
document.getElementById('mark-1').addEventListener('change',function(){
calculator();
});
These addEventListener functions adds listeners to the "input" field's predefined 'change'-events, and fires the calculator(); function from your code.
Seeing that you are using some sort of dynamic generation of the inputfields, you could add the listeners to your inputfields using the same querySelector that you use to target them during calculation. It would mean replacing getElementById('weight-1') in my example above with querySelectorAll('[id^=weight-]') for the weight-fields.
Also, doing work with values, IO, and calculation between html and JavaScript, I would suggest using a library like jQuery. jQuery simplifies these processes a lot.
This is the documentation for the jQuery alternative onClick function:
https://api.jquery.com/change/
I think you could do that with an angularJS module. Take a look at this tutorial : https://www.w3schools.com/angular/angular_modules.asp
maybe it will help.
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: #white;
border: 1px solid #gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: #blue;
background-color: #gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: #gray-2;
border: 1px solid #gray-4;
}
}
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">
The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.
I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.
For example (works in webkit browsers--will need some additional styling for other browsers):
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>