ui-slider | jQuery UI Slider for AngularJS | Plugin library

I've done my best to append a CSS version of my wrapper but I am having a lot of trouble with the slider (2nd item in the flex box).

This is a 5 step slider than I am trying to align to its 5 markers, denoted as the years 2017 through to 2021. However, the right hand side is going too far our of bounds each time, and does not line up with the markers themselves. I've tried my best to create a workable version, but this project was allocated to me with no notes and I'm struggling.

My ideal outcome is to have a slider that fits on the markers that requires very little/no responsive design tweaks when moving across displays (1280px, 1920px eg). Just that when you select say, 2019 - the ui handle is actually on that point. Further, when you select 2021 the ui handle doesn't go out of bounds.

The $year variable is read in from an options.inc file as range(2017, 2021) which appends the markers. But there is a disconnect between the slider and the markers.

My solution, if I cannot find better, is to use classes to move the slider depending on the class (first/second/middle) and map that across. But as you can imagine, having CSS overlap JS gives a bit of an awkward animation that I am trying to avoid.

I have a codepen demo, in which slick slider is moving by dragging the range slider but I want to move it when the user clicks on the next previous button also and on the slider itself. Currently, the movement is only by dragging range slider. Any help would be appreciated.

Demo link of slick slider with jquery slider

I have this range slider using the jQuery UI API, and it worked as expected but now i'm trying to delegate the slider to the DOM and no matter what I try it doesn't work. Here is my initial code (no selector delegation):

TLDR UPDATE: here a JSFiddle demonstrating my problem.

In an HTML game I have created a custom jQuery widget called table representing a rectangle green table with up to 4 players sitting at it:

In the above screenshot 4 such tables are appended to a #tablesList selectable by the following code:

I want to move my markers whenever it is slided along with the seek. I expect my markers to be exactly slidable as jqueryui-slider

Question: I want my markers(both) to be as slidable as jqueryui-range slider as shown below the video in the following example:

I have prepared a complete example for my question -

Screenshot with a div and 3 jQuery UI sliders:

HTML code:

Have a look at my code:

I have a volume slider, I am using jquery. And although it works, the 'ball' or 'handle' is not showing up.

How can I make the handled show up?

I have imported for jquery:

I'm playing with jQuery UI, and I've discovered something disappointing about their multi-handle slider implementation.

I've made an example for you here. I've made the handles slightly transparent so you can see what's going on:

https://codepen.io/ophello/pen/BaNaPdp

The first slider has the handles centered normally. When you click and drag them so they collide, they overlap. Gross!

Below that one, I made duplicate slider, except for this one, I've used CSS to adjust the margins of the handle positions so they don't collide, and they butt up right against each other when they meet, just like two physical sliders would! Great!