Build an Elastic Range Input with SVG and anime.js

Luis Manuel
💬 comments

Among all the fascinating web components we can found in any UI, forms are usually the most boring part. In the past, there used to be only a few text input elements, where the user had to enter the data manually. Then with HTML5 things improved a lot, since new types of input appeared, such as color, date and range, among many others.

Although functionally these new types of input works, we can say that they often do not meet the aesthetic needs of web applications, then many proposals have emerged to replace these elements and achieve a better appearance, and looking almost identical in all modern browsers.

In this tutorial we will see how we can simulate the behavior of a range input, with an elegant component like this:

Table of Contents

    Dribble Shot by Stan Yakusevich

    This original animation, which we have used as inspiration, can be found on this dribble shot by Stan Yakusevich.

    To code it, we will mainly use SVG to draw the paths, and anime.js to perform the animations.

    Above is the final product we'll make. Let's start!

    Coding the Markup: HTML and SVG

    Next we will see the main HTML structure that we will use. Please read the comments so you do not miss a single detail:

    <!-- Wrapper for the range input slider -->
    <div class="range__wrapper">
        <!-- The real input, it will be hidden, but updated properly with Javascript -->
        <!-- For a production usage, you may want to add a label and also put it inside a form -->
        <input class="range__input" type="range" min="30" max="70" value="64"/>
        <!-- All the other elements will go here -->

    As we can see, our component contains an actual input of type range, which we will update properly with Javascript. Having this input element and our component into a common HTML form, allows us to send the value of the input (along with the other form data) to server on submit.

    Now let's see the SVG elements that we need, commented for a better understanding:

    <!-- SVG elements -->
    <svg class="range__slider" width="320px" height="480px" viewBox="0 0 320 480">
            <!-- Range marks symbol, it will be reused below -->
            <symbol id="range__marks" shape-rendering="crispEdges">
                <path class="range__marks__path" d="M 257 30 l 33 0"></path>
                <path class="range__marks__path" d="M 268 60 l 22 0"></path>
                <path class="range__marks__path" d="M 278 90 l 12 0"></path>
                <path class="range__marks__path" d="M 278 120 l 12 0"></path>
                <path class="range__marks__path" d="M 278 150 l 12 0"></path>
                <path class="range__marks__path" d="M 278 180 l 12 0"></path>
                <path class="range__marks__path" d="M 278 210 l 12 0"></path>
                <path class="range__marks__path" d="M 278 240 l 12 0"></path>
                <path class="range__marks__path" d="M 278 270 l 12 0"></path>
                <path class="range__marks__path" d="M 278 300 l 12 0"></path>
                <path class="range__marks__path" d="M 278 330 l 12 0"></path>
                <path class="range__marks__path" d="M 278 360 l 12 0"></path>
                <path class="range__marks__path" d="M 278 390 l 12 0"></path>
                <path class="range__marks__path" d="M 268 420 l 22 0"></path>
                <path class="range__marks__path" d="M 257 450 l 33 0"></path>
            <!-- This clipPath element will allow us to hide/show the white marks properly -->
            <!-- The `path` used here is an exact copy of the `path` used for the slider below -->
            <clipPath id="range__slider__clip-path">
                <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
        <!-- Pink marks -->
        <use xlink:href="#range__marks" class="range__marks__pink"></use>
        <!-- Slider `path`, that will be morphed properly on user interaction -->
        <path class="range__slider__path" d="M 0 480 l 320 0 l 0 480 l -320 0 Z"></path>
        <!-- Clipped white marks -->
        <use xlink:href="#range__marks" class="range__marks__white" clip-path="url(#range__slider__clip-path)"></use>

    If this is the first time you use the SVG path element or you don't understand how they work, you can learn more in this excellent tutorial in MDN.

    And finally, we need another piece of code to show the values and texts that appears in the original animation:

    <!-- Range values -->
    <div class="range__values">
        <div class="range__value range__value--top">
            <!-- This element will be updated in the way: `100 - inputValue` -->
            <span class="range__value__number range__value__number--top"></span>
            <!-- Some text for the `top` value -->
            <span class="range__value__text range__value__text--top">
                <span>You Need</span>
        <div class="range__value range__value--bottom">
            <!-- This element will be updated with the `inputValue` -->
            <span class="range__value__number range__value__number--bottom"></span>
            <!-- Some text for the `bottom` value -->
            <span class="range__value__text range__value__text--bottom">
                <span>You Have</span>

    As you can see, the HTML code is quite easy to understand if we follow the comments. Now let's look at the styles.

    Adding styles

    We will start styling the wrapper element:

    .range__wrapper {
      user-select: none; // disable user selection, for better drag & drop
      // More code for basic styling and centering...

    As you can see, apart from the basic styles to achieve a proper appearance and centering the element, we have disabled the user's ability to select anything within our component. This is very important, since we will implement a "drag and drop" type interaction, and therefore if we allow the "select" functionality, we can get unexpected behaviors.

    Next we will hide the actual input element, and position the svg (.range__slider) element properly:

    // Hide the `input`
    .range__input {
      display: none;
    // Position the SVG root element
    .range__slider {
      position: absolute;
      left: 0;
      top: 0;

    And to color the SVG elements we use the following code:

    // Slider color
    .range__slider__path {
      fill: #FF4B81;
    // Styles for marks
    .range__marks__path {
      fill: none;
      stroke: inherit;
      stroke-width: 1px;
    // Stroke color for the `pink` marks
    .range__marks__pink {
      stroke: #FF4B81;
    // Stroke color for the `white` marks
    .range__marks__white {
      stroke: white;

    Now let's see the main styles used for the values. Here the transform-origin property plays an essential role to keep the numbers aligned with the text in the desired way, as in the original animation.

    // Positioning the container for values, it will be translated with Javascript
    .range__values {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    // These `transform-origin` values will keep the numbers in the desired position as they are scaled
    .range__value__number--top {
      transform-origin: 100% 100%; // bottom-right corner
    .range__value__number--bottom {
      transform-origin: 100% 0; // top-right corner
    // More basic styles for the values...

    Adding interactions with Javascript

    Now it's time to add the interactions, start animating things and having fun :)

    First, let's see the code needed to simulate the drag and drop functionality, listening to corresponding events, doing maths work and perform animations. Please note we are not including the whole code, but only the fundamental parts to understand the behavior.

    // Handle `mousedown` and `touchstart` events, saving data about mouse position
    function mouseDown(e) {
        mouseY = mouseInitialY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
        rangeWrapperLeft = rangeWrapper.getBoundingClientRect().left;
    // Handle `mousemove` and `touchmove` events, calculating values to morph the slider `path` and translate values properly
    function mouseMove(e) {
        if (mouseY) {
            // ... Some code for maths ...
            // After doing maths, update the value
    // Handle `mouseup`, `mouseleave` and `touchend` events
    function mouseUp() {
        // Trigger elastic animation in case `y` value has changed
        if (mouseDy) {
        // Reset values
        mouseY = mouseDy = 0;
    // Events listeners
    rangeWrapper.addEventListener('mousedown', mouseDown);
    rangeWrapper.addEventListener('touchstart', mouseDown);
    rangeWrapper.addEventListener('mousemove', mouseMove);
    rangeWrapper.addEventListener('touchmove', mouseMove);
    rangeWrapper.addEventListener('mouseup', mouseUp);
    rangeWrapper.addEventListener('mouseleave', mouseUp);
    rangeWrapper.addEventListener('touchend', mouseUp);

    Now we can take a look at the updateValue function. This function is responsible for updating the component values and moving the slider in correspondence with the cursor position. We have commented exhaustively every part of it, for a better understanding:

    // Function to update the slider value
    function updateValue() {
        // Clear animations if are still running
        anime.remove([rangeValues, rangeSliderPaths[0], rangeSliderPaths[1]]);
        // Calc the `input` value using the current `y`
        rangeValue = parseInt(currentY * max / rangeHeight);
        // Calc `scale` value for numbers
        scale = (rangeValue - rangeMin) / (rangeMax - rangeMin) * scaleMax;
        // Update `input` value
        rangeInput.value = rangeValue;
        // Update numbers values
        rangeValueNumberTop.innerText = max - rangeValue;
        rangeValueNumberBottom.innerText = rangeValue;
        // Translate range values = 'translateY(' + (rangeHeight - currentY) + 'px)';
        // Apply corresponding `scale` to numbers = 'scale(' + (1 - scale) + ')'; = 'scale(' + (1 - (scaleMax - scale)) + ')';
        // Some maths calc
        if (Math.abs(mouseDy) < mouseDyLimit) {
            lastMouseDy = mouseDy;
        } else {
            lastMouseDy = mouseDy < 0 ? -mouseDyLimit : mouseDyLimit;
        // Calc the `newSliderY` value to build the slider `path`
        newSliderY = currentY + lastMouseDy / mouseDyFactor;
        if (newSliderY < rangeMinY || newSliderY > rangeMaxY) {
            newSliderY = newSliderY < rangeMinY ? rangeMinY : rangeMaxY;
        // Build `path` string and update `path` elements
        newPath = buildPath(lastMouseDy, rangeHeight - newSliderY);
        rangeSliderPaths[0].setAttribute('d', newPath);
        rangeSliderPaths[1].setAttribute('d', newPath);

    As we have seen, within the previous function there is a call to the buildPath function, which is an essential piece in our component. This function will let us build the path for the slider, given the following parameters:

    • dy: distance in the y axis that mouse has been moved since the mousedown or touchstart event.
    • ty: distance in the y axis that the path must be translated.

    It also uses the mouseX value to draw the curve to the cursor position on the x axis, and return the path in String format:

    // Function to build the slider `path`, using the given `dy` and `ty` values
    function buildPath(dy, ty) {
        return 'M 0 ' + ty + ' q ' + mouseX + ' ' + dy + ' 320 0 l 0 480 l -320 0 Z';

    Finally, let's see how to achieve the interesting elastic effect:

    // Function to simulate the elastic behavior
    function elasticRelease() {
        // Morph the paths to the opposite direction, to simulate a strong elasticity
            targets: rangeSliderPaths,
            d: buildPath(-lastMouseDy * 1.3, rangeHeight - (currentY - lastMouseDy / mouseDyFactor)),
            duration: 150,
            easing: 'linear',
            complete: function () {
                // Morph the paths to the normal state, using the `elasticOut` easing function (default)
                    targets: rangeSliderPaths,
                    d: buildPath(0, rangeHeight - currentY),
                    duration: 4000,
                    elasticity: 880
        // Here will go a similar code to:
        // - Translate the values to the opposite direction, to simulate a strong elasticity
        // - Then, translate the values to the right position, using the `elasticOut` easing function (default)

    As you can see, it was necessary to implement two consecutive animations to achieve an exaggerated elastic effect, similar to the original animation. This is because a single animation using the elasticOut easing function is not enough.

    Summing up

    And finally we are done!

    We have developed a component to simulate the behavior of an input of type range, but with an impressive effect, similar to the original animation:

    Dribble Shot by Stan Yakusevich

    You can check the final result, play with the code on Codepen, or get the full code on Github.

    Please note that to make the tutorial a bit more fun and easy to follow, we have not explain here every single line of code used. However, you can find the complete code in the Github repository.

    We sincerely hope that you liked the tutorial, and it has served as inspiration!

    Luis Manuel

    12 posts

    Engineer in Computer Science and Freelance Front-End Developer. Available for Hire.