JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rate-elems">
        <div class="elem1"></div>
        <div class="elem2"></div>
        <div class="elem3"></div>
        <div class="elem4"></div>
        <div class="elem4"></div>
        <div class="elem4"></div>
    </div>

CSS

[class^="elem"] {
                width: 100px;
                height: 100px;
                background-color: #f00;
                display: inline-block;
            }
            .start {
                background-color: #000;
            }
            .color {
                background-color: #000;
            }

JavaScript

var elems       = document.body.querySelectorAll("[class^='elem']"),
    arrElems    = [].slice.call(elems),
    rateElems   = document.body.getElementsByClassName("rate-elems")[0];

rateElems.addEventListener("mouseleave", function (e) {
    if(!document.body.querySelector(".stop")) {
        arrElems.forEach( function(element, index) {
            element.classList.remove("color");
        });
    } else {
        return;
    }
});
 

for (var i = 0; i < elems.length; i++) {
    var start;
    var elem = elems[i];
 
    elem.addEventListener("click", function (e) {
        // если есть элемент с классом start
        if(document.body.querySelector(".start")) {
            // и отсутствует элемент с классом .stop
            if(!document.body.querySelector(".stop")) {
                // добавляем
                e.target.classList.add("stop");
            }
        } else {
            start = e.target;
            e.target.classList.add("start");
        };
    });
 
    elem.addEventListener("mouseenter", mouseoverListener);
};

function mouseoverListener (e) {
    if(document.body.querySelector(".stop")) return;
    if(document.body.querySelector(".start")) {

        var startIndex = arrElems.indexOf(start);
        var stopIndex = arrElems.indexOf(e.target);

        if(startIndex > stopIndex) {
            colorizeBetween(startIndex, stopIndex, "left");

        } else if (startIndex < stopIndex) {
            
            colorizeBetween(startIndex, stopIndex, "right");
        } else {
            arrElems.forEach( function(element, index) {
                element.classList.remove("color");
            });
        }

        function colorizeBetween (startIndex, stopIndex, direction) {
            if (direction === "right") {
                var stopIndex = stopIndex + 1;
                var arrBetween = arrElems.slice(startIndex, stopIndex);
                arrBetween.forEach( function(element, index) {
                   ...