Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The tick elements are generated in the DOM.

I have styled the slider thumb to have a curved border, and the span displaying the range value acts as a circular thumb. While the connection between the circle thumb and the slider cannot be curved, it still functions correctly.

The desired outcome is to animate the ticks so they move over the thumb when positioned. This image demonstrates the expected result:

https://i.stack.imgur.com/BEn4E.png

This is the relevant code snippet and accompanying CodePen demo link:

// JavaScript code for generating ticks dynamically
var i;
const tickContainer = document.getElementById('tickContainer');

for (i = 1; i <= 100; i++) {
    var p = document.createElement('P');
    tickContainer.appendChild(p);
}

// JS function to position the span displaying range value
const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  const newValue = Number((range.value - range.min) * 100 / (range.max - range.min));
  const newPosition = 35 - (newValue * 0.7);
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;

  rangeV.innerHTML = `<span>${range.value}%</span>`;
};

// Call the setValue function onload and oninput
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
CSS styles go here...
HTML structure goes here...

javascripthtmlcssanimationrangeslider

Answer №1

Using the mask, a unique idea is implemented here to create ticks with background instead of elements and then shape a curve around the thumb using masks. The mask consists of a radial-gradient for the circular shape that moves based on the thumb value, and a linear-gradient to establish the foundation.

// To avoid lengthy HTML code, ticks are created here
var i;
const tickContainer = document.getElementById('tickContainer');

// Positioning the range value span - not crucial
const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  const newValue = Number((range.value - range.min) * 100 / (range.max - range.min));
  const newPosition = 35 - (newValue * 0.7);
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
  tickContainer.style.setProperty('--p', `calc(${newValue}%)`);
  rangeV.innerHTML = `<span>${range.value}%</span>`;
};

// Setting initial value onload and oninput
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
body {
  font-family: Arial;
  margin: 50px;
}

.range-wrap {
  position: relative;
}


/* Styling the ticks over the range */

.ticks {
  position: absolute;
  left: -15px;
  right: -15px;
  padding:0 15px;
  top: -25px;
  height: 45px;
  background: repeating-linear-gradient(to right, #D3D3D3 0 2px, transparent 2px 6px);
  background-clip:content-box;
  -webkit-mask: 
    radial-gradient(farthest-side at bottom, #fff 98%, transparent) var(--p, 0) 0px/100px 50px, 
    linear-gradient(#fff, #fff) bottom/100% 10px;
  -webkit-mask-repeat: no-repeat;
  mask: 
    radial-gradient(farthest-side at bottom, #fff 98%, transparent) var(--p, 0) 0px/100px 50px, 
    linear-gradient(#fff, #fff) bottom/100% 10px;
  mask-repeat: no-repeat;

}


/* Styling the range */

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  margin: 20px 0;
  width: 100%;
  background-image: linear-gradient(125deg, #e0e0e0 34%, #0008d7 100%);
  outline: none;
}

input[type=range]:focus {
  outline: none
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  border-radius: 25px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 70px;
  width: 70px;
  cursor: pointer;
  background: #ddd;
  /* Thumb gradient as slider */
  background-image: linear-gradient(white, white), linear-gradient(to right, #e0e0e0 34%, #0008d7 100%);
  background-attachment: fixed, fixed;
  background-clip: padding-box, border-box;
  /* Hide bottom half of the circle with white color - as background is */
  border: 3px solid transparent;
  border-color: transparent transparent #fff #fff;
  border-radius: 50%;
  transform: translateY(-44.3%) rotate(-45deg);
}


/* Range value inside of range thumb */

.range-value {
  position: absolute;
  top: -50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.range-value span {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #0008d7;
  font-size: 18px;
  display: block;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
}
<div class="range-wrap">
  <!-- Ticks (lines) over slider. -->
  <div class="ticks" id="tickContainer">
  </div>
  <!-- Range value inside of range thumb -->
  <div class="range-value" id="rangeValue"></div>
  <!-- Range itself -->
  <input id="range" type="range" min="1" max="100" value="1" step="1">
</div>

<p>If slider is not working properly, it means your browser doesn't support <code>-webkit</code>. You can visit <a href="https://codepen.io/Vepth/pen/zYrPZqv">CodePen</a> for full browser support.</p>

To introduce a gap, you can update the mask in this way:

// Creating ticks here to prevent long HTML code
var i;
const tickContainer = document.getElementById('tickContainer');

// Position of span that shows range value - not important
const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  const newValue = Number((range.value - range.min) * 100 / (range.max - range.min));
  const newPosition = 35 - (newValue * 0.7);
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
  tickContainer.style.setProperty('--p', `calc(${newValue}%)`);
  rangeV.innerHTML = `<span>${range.value}%</span>`;
};

// Initialize setValue onload and oninput
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
body {
  font-family: Arial;
  margin: 50px;
}

.range-wrap {
  position: relative;
}


/* Styling of ticks (lines) over the range */

.ticks {
  position: absolute;
  left: -15px;
  right: -15px;
  padding:0 15px;
  top: -30px;
  height: 45px;
  background: repeating-linear-gradient(to right, #D3D3D3 0 2px, transparent 2px 6px);
  background-clip:content-box;
  -webkit-mask: 
    radial-gradient(farthest-side at bottom,transparent 75%, #fff 76% 98%, transparent) 
      var(--p) 0px/100px 50px, 
    linear-gradient(#fff, #fff) var(--p) 100%/95px 10px,
    linear-gradient(#fff, #fff) bottom       /100% 10px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over,destination-out;
  mask: 
    radial-gradient(farthest-side at bottom,transparent 75%, #fff 76% 98%, transparent) 
      var(--p) 0px/100px 50px, 
    linear-gradient(#fff, #fff) var(--p) 100%/95px 10px,
    linear-gradient(#fff, #fff) bottom       /100% 10px;
  mask-repeat: no-repeat;
  mask-composite: exclude;
  
}


/* Styling of the range */

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  margin: 20px 0;
  width: 100%;
  background-image: linear-gradient(125deg, #e0e0e0 34%, #0008d7 100%);
  outline: none;
}

input[type=range]:focus {
  outline: none
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  border-radius: 25px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 70px;
  width: 70px;
  cursor: pointer;
  background: #ddd;
  /* Thumb gradient as slider */
  background-image: linear-gradient(white, white), linear-gradient(to right, #e0e0e0 34%, #0008d7 100%);
  background-attachment: fixed, fixed;
  background-clip: padding-box, border-box;
  /* Hide bottom half of the circle with white color - as background is */
  border: 3px solid transparent;
  border-color: transparent transparent #fff #fff;
  border-radius: 50%;
  transform: translateY(-44.3%) rotate(-45deg);
}


/* Range value (label) inside of range thumb */

.range-value {
  position: absolute;
  top: -50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.range-value span {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #0008d7;
  font-size: 18px;
  display: block;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99;
}
<div class="range-wrap">
  <!-- Ticks (lines) over slider. -->
  <div class="ticks" id="tickContainer">
  </div>
  <!-- Range value inside of range thumb -->
  <div class="range-value" id="rangeValue"></div>
  <!-- Range itself -->
  <input id="range" type="range" min="1" max="100" value="1" step="1">
</div>

<p>If slider does not work correctly, it may be due to lack of support for <code>-webkit</code> in your browser. Consider visiting <a href="https://codepen.io/Vepth/pen/zYrPZqv">CodePen</a> for complete browser support.</p>

Here's the entire code compatible across all browsers:

// Creating ticks here to prevent long HTML code
var i;
const tickContainer = document.getElementById('tickContainer');

// Position of span that shows range value - not crucial
const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  const newValue = Number((range.value - range.min) * 100 / (range.max - range.min));
  const newPosition = 35 - (newValue * 0.7);
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
  tickContainer.style.setProperty('--p', `calc(${newValue}%)`);
  rangeV.innerHTML = `<span>${range.value}%</span>`;
};

// Initializing setValue onload and oninput
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
body {
  font-family: Arial;
  margin: 50px;
}

.range-wrap {
  position: relative;
}

/* Styling of ticks (lines) over the range */
.ticks {
  position: absolute;
  left: -15px;
  right: -15px;
  padding:0 15px;
  top: -30px;
  height: 45px;
  background: repeating-linear-gradient(to right, #D3D3D3 0 2px, transparent 2px 6px);
  background-clip: content-box;
  -webkit-mask: 
    radial-gradient(farthest-side at bottom, transparent 75%, #fff 76% 98%, transparent) 
      var(--p) 0px/100px 50px, 
    linear-gradient(#fff, #fff) var(--p) 100%/95px 10px,
    linear-gradient(#fff, #fff) bottom       /100% 10px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, destination-out;
  mask: 
    radial-gradient(farthest-side at bottom, transparent 75%, #fff 76% 98%, transparent) 
      var(--p) 0px/100px 50px, 
    linear-gradient(#fff, #fff) var(--p) 100%/95px 10px,
    linear-gradient(#fff, #fff) bottom       /100% 10px;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

/* Styling the range */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  margin: 20px 0;
  width: 100%;
  height: 4px;
  background-image: linear-gradient(125deg, #e0e0e0 34%, #0008d7 100%);
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  border-radius: 25px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  border-radius: 25px;
}

input[type=range]::-webkit-slider-thumb {
  height: 70px;
  width: 70px;
  -webkit-transform: translateY(-44.3%) rotate(-45deg);
          transform: translateY(-44.3%) rotate(-45deg);
  -webkit-appearance: none;
  appearance: none;
  background: #ddd;
  border: 3px solid transparent;
  border-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  background-image: linear-gradient(white, white), linear-gradient(to right, #e0e0e0 34%, #0008d7 100%);
  background-attachment: fixed, fixed;
  background-clip: padding-box, border-box;
}

input[type=range]::-moz-range-thumb {
  height: 63px;
  width: 63px;
  appearance: none;
  background: #ddd;
  border: 3px solid transparent;

  border-radius: 50%;
  cursor: pointer;
  background-image: linear-gradient(white, white), linear-gradient(to right, #e0e0e0 34%, #0008d7 100%);
  background-attachment: fixed, fixed;
  background-clip: padding-box, border-box;
}

/* Range value (label) inside of range thumb */
.range-value {
  position: absolute;
  top: -50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
  user-select: none;
  select: none;
  pointer-events: none;
}

.range-value span {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #0008d7;
  font-size: 18px;
  display: block;
  position: absolute;
  top: 20px;
  border-radius: 50%;
  user-select: none;
  select: none;
  pointer-events: none;
  z-index: 100;
}

.range-value::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 50px;
  top: 0;
  left: 0;
  background: white;
  user-select: none;
  select: none;
  pointer-events: none;
  transform: translate(-50%, 96%);
  -webkit-transform: translate(-50%, 92%);
}
<div class="range-wrap">
  <!-- Ticks (lines) over slider. -->
  <div class="ticks" id="tickContainer">
  </div>
  <!-- Range value inside of range thumb -->
  <div class="range-value" id="rangeValue"></div>
  <!-- Range itself -->
  <input id="range" type="range" min="1" max="100" value="1" step="1">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Streaming audio from a microphone to speakers on Ubuntu using HTML5

Currently diving into html5 and eager to experiment with playing back what I say on a microphone through speakers. Here is the JavaScript code I've put together: navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || naviga ...

javascriptlinuxhtmlubuntufirefox

Display v-select options by clicking a button

I am trying to figure out a way to make the vuetify v-select component appear when I click on an icon button. The v-select should remain hidden when closed, only visible when triggered by clicking the button. It's like having the button toggle the vis ...

htmlvue.jsvuetify.jsv-select

Tips for creating several radio buttons with separate functionality using Bootstrap 5

Is there a way to create separation between these two groups of radio buttons? Whenever I select an option in one group, it automatically deselects the option in the other group. <!DOCTYPE html> <html lang="en"> <head> ...

htmlradio-buttonbootstrap-5

"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the div ...

jqueryhtmlcssfade

Unable to apply box-shadow styling to input elements

Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...

css

Submitting an mvc partial view form to send data from the parent view

I am currently working on a MVC 5 App where I have a Parent View that includes a Partial View, allowing users to load images. Upon submitting, the Parent view calls a .Ajax function defined within it, which in turn calls a Method/Controller. My requireme ...

javascriptjqueryajaxasp.net-mvcparentviewcontroller

Observing the completion of a subscriber function

Is there a more streamlined way to determine if the subscriber has finished executing or return something and catch it up-stream? Consider the following code snippets: this._subscriptions.push(this._client .getCommandStream(this._command) // R ...

javascripttypescriptpromiserxjsobservable

Creating a line with CSS is a straightforward process that involves using properties

I am trying to achieve a yellow line effect similar to the image shown using CSS. I have managed to create line holes so far, but I'm struggling with creating vertical straight lines. Here is an example of my current code: Below is my code snippet: # ...

htmlcss

Unable to retrieve the desired dropdown element using xpath location strategy

On my website, I have a drop-down menu for selecting time zones and I need to be able to access the options easily. https://i.sstatic.net/jR4gx.png Here is the HTML code snippet: <li> <div id="ember2503" class= ...

pythonhtmlxpath

Tips for refreshing the modified toggle in angular2

I currently have a newsletter subscription that is initially set based on the newsletter I receive when the user logs in. However, when I toggle the newsletter option, I receive a "successfully updated" message but the newsletter remains set to false even ...

javascriptangulartypescript

Steps for initializing input field with pre-existing values using Redux form

After reviewing the Redux Form documentation, I noticed that the example provided only fetches initial values upon button click. However, my requirement is to have these values available immediately when the page loads. In my current setup, I can successf ...

javascriptreactjsredux-form

Display a <button> element as a text hyperlink within a paragraph, ensuring proper wrapping and flow

I want to incorporate a link-styled <button> within a block of text while ensuring that it flows smoothly with the surrounding content. Although styling the button is straightforward and setting display: inline allows it to blend into the text flow, ...

htmlcssbutton

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

javascripthtmlcssdom

Expanding Two HTML Elements to Fill the Screen Width Using HTML/CSS

This is the current setup: The screenshot spans the width of my screen. The image is aligned to the left side, while the Level information section remains fixed to the right of the image. This layout meets my requirements. However, I would like the border ...

htmlcss

The magic of coding is in the combination of Javascript

My goal is to create a CSS animation using jQuery where I add a class with a transition of 0s to change the color, and then promptly remove that class so it gradually returns to its original color (with the original transition of 2s). The code below illus ...

javascriptjqueryhtmlcss

Is there a way to do HTML select-option in a reversed order?

Having an issue with my HTML select element: <select> <option>...</option> <option>...</option> <option>...</option> </select> Currently, all the options are displayed below the select field. I ...

htmlpopup

Utilizing AngularJS in combination with Bootstrap's user-friendly UI date

Is there a way to manipulate the datepicker object so it can open and close as needed? Also, how can I access the datepicker object in a different directive within AngularJS? ** HTML ** <input type="text" class="form-control" uib-datepicker-popup="{{f ...

javascriptangularjsdatepickerangularjs-bootstrap

How can you check the boolean value of a checkbox using jQuery?

I have a checkbox on my webpage. <input id="new-consultation-open" type="checkbox" /> My goal is to store the state of this checkbox in a variable as a boolean value. consultation.save({ open: $("#new-consultation-open").val() }); Unfortunate ...

javascriptjquerycheckbox

How can we utilize a loop to continuously sum up numbers until we reach a multiple of another number, let's say when the total is divisible by 4?

I am trying to create a function in JavaScript that will detect when a given number is not a multiple of 4. If the number is not a multiple of 4, I want to add numbers incrementally until it reaches the closest multiple of 4. Here’s what I have so far: ...

javascriptmodulus

Instructions for implementing personalized horizontal and vertical scrolling within Angular 9

I am currently working on an angular application where users can upload files, and I display the contents of the file on the user interface. These files may be quite long, so I would need vertical scrolling to navigate through them easily. Additionally, fo ...

javascripthtmlcssangulartypescript