How to create a plain slider that snaps to divisions


Out of the box, {N} sliders are not snapping to divisions - at least as of January 12, 2018 :slight_smile: . Since I had the need to create a slider that is snapping to X number of divisions (using plain JS), I share the code in case someone needs it at some point.

Initially I was considering using RadSlider, but it turns out it is not available for {N}. And at the end, I didn’t need it anyway because you can make the plain slider snap (…just like I do sometimes… :slight_smile: )

Link to playground:


That’s neat! Do you think that should be part of the tns-core-modules package? Maybe you could create a PR to the NativeScript/NativeScript repo!


This is really useful however I have a number of sliders on a page that have Id’s derived from a question id loaded from a database. My slider Id’s look like they s-q1-9.1.1 (S = Slider, Q1 = Question Number and 9.1.1 = Question Reference).

I write these slider names (Will also be doing the same for some comments displayed with each question) to an array. The idea is to then loop through the array of Id’s on the page, get the values of the sliders and comments boxes and write them to a database probably SQLLite and then sync to MySQL.

Each of these sliders need to snap to 20% steps but obviously from your code I do not know the names to be able to handle the observable, any thoughts please. I’m using Javascript.