Custom javascript scroller is working perfectly, except for turning 'current selection' black

Question

I have copied a free template (https://webflow.com/website/CMS-Pricing-Slider-l0isx3jn) to my Webflow website, because I love the scroller and was keen to edit it a little. Everything is working as expected (I have imported the CMS library and copied over the custom code to my webflow page), however when I publish the page, the animation does not turn the 'current selection' black and bold, like it does here (https://cms-pricing-slider.webflow.io/). The code is below, any thoughts? (I am a relative beginner at JS)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragdealer/0.9.9/dragdealer.min.js"></script>
<script>
let cmsItem = $(".position_item");
let cmsItemLength = cmsItem.length;

function changeColor(item) {
  let myColor = item.find(".color").css("background-color");
  $(".handle_fill").css("border-color", myColor);
  $(".handle_back").css("background-color", myColor);
}
changeColor(cmsItem.eq(0));

cmsItem.eq(0).addClass("active");

new Dragdealer("drag-steps", {
  steps: cmsItemLength,
  speed: 0.2,
  loose: false,
  slide: true,
  animationCallback: function (x, y) {
    cmsItem.each(function (index) {
      countSalary($(this));
    });

    function countSalary(currentItem) {
      let currentDecimal = currentItem.index() / (cmsItemLength - 1);
      let nextDecimal = (currentItem.index() + 1) / (cmsItemLength - 1);
      if (x >= currentDecimal && x < nextDecimal) {
        let itemSalary = +currentItem.find(".position_salary").text();
        let nextItemSalary = +currentItem
          .next()
          .find(".position_salary")
          .text();
        let increaseTo = nextItemSalary - itemSalary;
        let scaleFactor = increaseTo / (nextDecimal - currentDecimal);
        let num = (x - currentDecimal) * scaleFactor + itemSalary;
        $(".handle_count").text(Math.round(num));
      }
    }
  },
  callback: function (x, y) {
    cmsItem.each(function (index) {
      let currentDecimal = $(this).index() / (cmsItemLength - 1);
      if (x == currentDecimal) {
        cmsItem.removeClass("active");
        $(this).addClass("active");
        changeColor($(this));
      }
    });
  },
  dragStopCallback(x, y) {
    $(".handle_fill").addClass("release");
  }
});

$(".handle").on("mousedown touchstart", function () {
  $(".handle_fill").removeClass("release");
});

$(".handle").on("mouseup touchend", function () {
  $(".handle_fill").addClass("release");
});

</script>

Answer 1

The javascript is likely working properly, you just may not have the same css classes defined.

The reason your colors are working properly is that those are applied via inline styles, such as

  $(".handle_back").css("background-color", myColor);

which is will add an inline style, similar to

<div class="handle_back" style="background-color:red;"></div>

This has no dependencies on any styles defined elsewhere, so it works correctly

The code that makes the selected item turn black is done by adding/removing the css class active

$(this).addClass("active");

This relevant styles are defined elsewhere as

<style>
.position_item {
    width: 6em;
    opacity: 0.24;
}

.position_item.active {
    opacity: 1.0;
}
</style>

Your javascript is only adding/removing the 'active' class, You must additionally define the styles for the active class yourself.