JQuery to Vanilla JavaScript Slider Ticks

programming web dev
1

I am in the process of converting jquery to javascript and on one page we have some range sliders we set all the ticks in jquery and I’m wondering how to do this…
jquery:
$("#months").slider({
ticks:[12, 24, 36],
ticks_labels: [‘12’,‘24’,‘36’],
step:12,
ticks_snap_bounds:12,
ticks_positions:[0, 50 ,100],});
$("#users").slider({
ticks: [25, 100, 500, 1000],
ticks_labels: [‘25’, ‘100’, ‘500’, ‘1000+’],
ticks_snap_bounds: 1,
step: 1,
ticks_positions: [0,30,65,100], });

I did try this but it did not work:
var monthslider = document.getElementById(‘months’);
var usersslider = document.getElementById(‘users’);

var monthsTicks = {
ticks:[12, 24, 36],
ticks_labels: [‘12’,‘24’,‘36’],
step:12,
ticks_snap_bounds:12,
ticks_positions:[0, 50 ,100],
};

var usersTicks = {
ticks: [25, 100, 500, 1000],
ticks_labels: [‘25’, ‘100’, ‘500’, ‘1000+’],
ticks_snap_bounds: 1,
step: 1,
ticks_positions: [0,30,65,100],
};

Object.assign(monthslider.style, monthsTicks);
Object.assign(usersslider.style, usersTicks);

2

monthTicks and userTicks are not CSS, they are JS objects so assigning to .style won’t work. The slider your using must be a jquery widget and slider() is not really a method that has an direct equivalent in vanilla JS.

Slider() is a JS interface method that would build/ style the element based on the values in the object passed in when its called.

There’s probably some custom-elements out there that will do the same job for you in vanilla JS without using jquery.

This popped up in a quick search: 7 Best Custom Range Slider JavaScript Libraries (2021 Update) - CSS Script

You will need to look at the docs to work out how to utilize a custom-element .The constructor() will probably accept an object in a similar format to the jquery slider.

If you get stuck pop back on. :slightly_smiling_face:

3

The vanilla slider is trying to get some of these capabilities, but support is still a bit far away. You can see an example here: