How to POSITION my Marker to Always Follow the Slider-Handle?
up vote
-6
down vote
favorite
I'm currently learning CSS and JS layouting. How do I make my MARKER always follow the SLIDER-HANDLE (cursor) wherever it goes like they were grouped as one?
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
javascript jquery html css css3
edited Nov 8 at 12:05
לבני מלכה
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
|
show 1 more comment
up vote
-6
down vote
favorite
I'm currently learning CSS and JS layouting. How do I make my MARKER always follow the SLIDER-HANDLE (cursor) wherever it goes like they were grouped as one?
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
javascript jquery html css css3
edited Nov 8 at 12:05
לבני מלכה
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
1
but where is your code??
– לבני מלכה
Nov 8 at 9:50
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
1
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19
|
show 1 more comment
up vote
-6
down vote
favorite
up vote
-6
down vote
favorite
I'm currently learning CSS and JS layouting. How do I make my MARKER always follow the SLIDER-HANDLE (cursor) wherever it goes like they were grouped as one?
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
javascript jquery html css css3
edited Nov 8 at 12:05
לבני מלכה
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
I'm currently learning CSS and JS layouting. How do I make my MARKER always follow the SLIDER-HANDLE (cursor) wherever it goes like they were grouped as one?
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
} <form>
<div class='slidecontainer' >
<div class='sliderticks'>
</div>
</div>
<div class='add-queston-btn'>
<img src='Imagespointmarker.png' data-quiz-number='2' z-index='2'>
</div>
</form>
javascript jquery html css css3
javascript jquery html css css3
edited Nov 8 at 12:05
לבני מלכה
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
edited Nov 8 at 12:05
לבני מלכה
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
edited Nov 8 at 12:05
לבני מלכה
7,5311423
edited Nov 8 at 12:05
לבני מלכה
7,5311423
edited Nov 8 at 12:05
לבני מלכה
7,5311423
7,5311423
asked Nov 8 at 9:49
noogui
11.4k3922
asked Nov 8 at 9:49
noogui
11.4k3922
asked Nov 8 at 9:49
noogui
11.4k3922
11.4k3922
1
but where is your code??
– לבני מלכה
Nov 8 at 9:50
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
1
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19
|
show 1 more comment
1
but where is your code??
– לבני מלכה
Nov 8 at 9:50
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
1
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19
1
1
but where is your code??
– לבני מלכה
Nov 8 at 9:50
but where is your code??
– לבני מלכה
Nov 8 at 9:50
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
1
1
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19
|
show 1 more comment
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>answered yesterday
לבני מלכה
7,5311423
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>answered yesterday
לבני מלכה
7,5311423
add a comment |
up vote
1
down vote
accepted
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>answered yesterday
לבני מלכה
7,5311423
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>answered yesterday
לבני מלכה
7,5311423
Youc can set a position to image using Jquery
See fiddle
//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>//set a begining position to img
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-7 + "px");
//set a position to img when slide move
$(document).on('input', '.slider', function() {
var slider = $(".slider")[0];
var sliderPos = slider.value / slider.max;
var pixelPostion = slider.clientWidth * sliderPos;
$(".img").css("left",pixelPostion-5 + "px");
});.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: red;
}
.img{
width: 30px;
height: 30px;
background-image: url("https://i.stack.imgur.com/xAPBs.png");
background-size: 30px 30px;
position:absolute;
left:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider"/>
<div class="img"></div>
</div>answered yesterday
לבני מלכה
7,5311423
answered yesterday
לבני מלכה
7,5311423
answered yesterday
לבני מלכה
7,5311423
answered yesterday
לבני מלכה
7,5311423
7,5311423
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53205170%2fhow-to-position-my-marker-to-always-follow-the-slider-handle%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
but where is your code??
– לבני מלכה
Nov 8 at 9:50
@לבנימלכה You don't have to write me the code. If you can give me reference on how to do it, that'll help.
– noogui
Nov 8 at 9:54
Where is your JS? Could you please post out the full exemple of what you've tried? That'll help us try and find a solution :)
– Islam Elshobokshy
Nov 8 at 9:59
1
The code you have shown so far does not even come close to reproducing what your image shows. We therefor don‘t know how you implemented any of the functionality, how the slider is moved, etc. - and therefor we also can’t answer your question. So please start with a proper Minimal, Complete, and Verifiable example of what you have so far.
– misorude
Nov 8 at 10:22
@לבנימלכה thanks for posting an answer below. I don't understand why'd they downvote your answer tho hahahaha, I'd prolly give it a thumbs up
– noogui
Nov 9 at 3:19