# JQuery to Vanilla JavaScript Slider Ticks

**URL:** <https://forum.kirupa.com/t/jquery-to-vanilla-javascript-slider-ticks/647927>\
**Category:** web dev\
**Created:** [June 15, 2021, 1:45pm UTC](https://forum.kirupa.com/t/jquery-to-vanilla-javascript-slider-ticks/647927 "2021-06-15T13:45:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![leellbee](https://avatars.discourse-cdn.com/v4/letter/l/f475e1/32.png) [@leellbee](https://forum.kirupa.com/u/leellbee)\
**Post date:** [June 15, 2021, 1:45pm UTC](https://forum.kirupa.com/t/jquery-to-vanilla-javascript-slider-ticks/647927/1 "2021-06-15T13:45:29Z")

</div>

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);

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [June 15, 2021, 2:19pm UTC](https://forum.kirupa.com/t/jquery-to-vanilla-javascript-slider-ticks/647927/2 "2021-06-15T14:19:24Z")

</div>

`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](https://www.cssscript.com/best-range-slider-replacement-libraries/)

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. 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 15, 2021, 4:21pm UTC](https://forum.kirupa.com/t/jquery-to-vanilla-javascript-slider-ticks/647927/3 "2021-06-15T16:21:52Z")

</div>

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:

https://codepen.io/kirupa/embed/preview/OJprEdb?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=OJprEdb