Home » How to POSITION my Marker to Always Follow the Slider-Handle?

How to POSITION my Marker to Always Follow the Slider-Handle?


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;

    width: 30px;
    height: 30px;
    background-image: url("https://i.stack.imgur.com/xAPBs.png");
    background-size: 30px 30px;
<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>

Related Solutions

StringBuilder delete methods [closed]

I'd say this is fine. The intent is different. Lets try this for example: String builder sb = new StringBuilder(); sb.append("hello").append("hello"); sb.delete(0,5); sb.toString(); It prints "hello". Had you read the documentation, you'd see that the end is...

How to get specific element from array of type any in swift?

You should not be using JSONSerializer in Swift. A better option is a JSONDecoder. JSONDecoder will allow you to establish and preserve the type information for the data you've decoded. Here is an Playground example of how you would use JSONDecoder to handle...

How to make RecyclerView behave like Paragraph?

The answer is FlexBoxLayoutManager you can use it with RecyclerView put implementation 'com.google.android:flexbox:1.0.0' in your gradle file. Now setting up RecyclerView layout, <?xml version="1.0" encoding="utf-8"?> <RelativeLayout...

Piping commands after a piped xargs

You are almost there. In your last command, you can use -I to do the ls correctly -I replace-str Replace occurrences of replace-str in the initial-arguments with names read from standard input.  Also, unquoted blanks do not terminate input items; instead the...

create arrow using css

Try to use Font awsome LINK HTML: <i class="fa fa-arrow-right"></i> fa-arrow-right Yes, there are several ways of doing this. 1. With an image First of all, in order to do what you've suggested, you can indeed use an image - but instead of coloring...

accessing values structure within structure? [closed]

Just create an object of emp1 inside your main, and give it a value like below and it should be ok emp1 emp; emp.number.number1=3; //printf then with emp.number.number1 😉 You are accessing the value "number1" like emp1.number.number1 but here "emp" data type...

What’s wrong with this way to add rows to dataframe?

Try: data <- data.frame(A= character(0), B= character(0), stringsAsFactors=FALSE) data[1, ] <- c("AA", "BB") In your example, A and B are factors. I would suggest a different approach from the other answers. If A and B are something like names or ID...

Panagram python code [closed]

import string def isPanagram(sentence): alphabet = string.lowercase[:26] # list of letters a-z return all(letter in sentence.lower() for letter in alphabet) The function all will return true if all elements in a list are true The list comprehension inside goes...

VB Code explanation? [closed]

Declare a student name variable that we will call studentname as a string. Think of variables as you would do x and y in an algebraic equation. They are simply names for things of a particular type. In a maths equation x and y are numbers. A string is a...

remove null items from a multidimensional array in C#

Are your null objects always at the end of the multidimentional array? If so use something like this to remove the null items: private static void ReDimMultiObjects(ref object[,] arr, int length) { object[,] arrTemp = new object[length, 3];//New number of...

Check if string contains only one type of letter C# [closed]

Try this: private bool ContainsOnlyOneLetter(string String) { if(String.Length == 0) { return true; } for(int i = 0; i < String.Length;i++) { if(String.Substring(i,1) != String.Substring(0,1)) { return false; } } return true; } And you can use the function...

Couldn’t understand this SWIFT Fucntion [closed]

You're getting 120 because you're asking the tuple for the sum value twice. The tuple passed back is (min: Int, max: Int, sum: Int). In this case, sum is also index number 2 (min is index zero, max is index one). So in this case statistics.sum == statistics.2...

C++ Cli code stucked [closed]

The code you provided does not work on any numbers. The only thing it does is construct some SQL query check its result During the SQL-query-construction, the code does not assume any "numbers" to be provided. It actually uses a variable called...