Adjust the alignment of points in JQuery UI slider values

Question

Adjust the alignment of points in JQuery UI slider values

Currently, I am utilizing jQuery UI slider with 6 points along with 6 divs positioned above the slider. My goal is to align the points in the middle of each div located above the slider.

Is there a method available to specify the position of values in jQuery UI slider?

For reference, here is an example of what I am working on: jsfiddle

$('#slider').slider({
    value:1,
    min: 1,
    max: 6,
    step: 1,
    slide: function(event, ui) {

    }
});


<div id="assesment-filter">
    <div class="assesments-wrapper">
        <div id="1" class="assesment">1</div>
        <div id="2" class="assesment">2</div>
        <div id="3" class="assesment">3</div>
        <div id="4" class="assesment">4</div>
        <div id="5" class="assesment">5</div>
        <div id="6" class="assesment">6</div>
    </div>
<div id="slider"></div>
</div>


.assesments-wrapper {
    height: 33px;
}

.assesment {
    width: 33px;
    height: 33px;
    background-color: rgb(219,219,219);
    line-height: 33px;
    float: left;
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.assesment:hover {
        cursor: pointer;
    }

.ui-slider-handle{
  display: block;
  position: relative;
  top: -6px;
  width: 15px;
  height: 15px;
  background-color: #2CBFD9;
  border-radius: 50%;
  border: 1px solid white;
}

.ui-slider-handle:hover {
  cursor: pointer;
}

.ui-slider{
  background-color: rgb(219,219,219);
  height: 3px;
  width: 203px;
  margin-bottom: 16px;
}

jquery html css jquery-ui slider

Answer 1

Answer №1

After some careful calculations, I have solved the problem for you.

The width of the anchor in blue color is calculated as

15px + (1px + 1px)(Border) = 17px;

Upon inspecting the ui-slider, it starts at left:0% and increments based on the max, min, and step values.

In this specific case where max=6, min=1, step=1, the increment in percentage is calculated as 100*step/(max-min) which results in 20%.

Each Assessment has a width of 33px+1px=34px, leading to the wrapper div having a size of approximately 34*6=204px.

To center the slider anchor, it needs to start at left:8.5px with a relative position to the wrapper since the anchor's width is 17px and assessment's width is 34px.

As the anchor is placed at the center of the first div initially, half of the task is completed.

At the last step where left:100%, the anchor extends beyond the slider, requiring the ui-slider width to be calculated as width of wrapper - 2*(width of anchor).

If the last step was at left:80%, then the calculation for ui-slider width would be modified accordingly.

Ultimately, the ui-slider width is determined as 204-2*17 = 170px;.

Aligning the first and last steps ensures everything falls into place inside the slider.

You can find the solution in this fiddle: Fiddle For Slider.

Here is the essential code for reference:

.assesments-wrapper {
        height: 33px;
        width: fit-content;
    }

.ui-slider{
  position: relative;
  background-color: rgb(219,219,219);
  height: 3px;
  width: 171px;
  left:8.5px;
  margin-bottom: 16px;
}

I acknowledge that there may be better solutions out there, but I attempted to solve this challenge without resorting to Google search.

Despite my unconventional approach, I will share this on SO :).

Answer 2

After some careful calculations, I have solved the problem for you.

The width of the anchor in blue color is calculated as

15px + (1px + 1px)(Border) = 17px;