Building a custom slider

eggroll shared this question 1 year ago


I'm trying to build a horizontal slider that does two things:

  1. Starts with the slider handle positioned in the center
  2. Has the slider track to the left of the handle a different color from the slider track to the right of the handle

I've got it close to working properly with one exception. While the slider handle starts out in the center, as I would like (see first image below), and I can slide the handle to the far left without exceeding the boundaries of the slider (see second image below), I can not slide the handle to the far right. It will not go any farther than the initial center position.

I cannot figure out what setting it is that is causing it to stop at center and go no farther to the right. I'm assuming it has to do with the initial positioning and how that affects the scrolling of the dynamic panel, but I don't know how to work around that or why it wouldn't even work as is since it is an element that is bigger than the containing dynamic panel and, therefore, should scroll left or right until reaching the limit of the element being scrolled (i.e. the slider handle and the two track lines).

I have tried to adapt the slider widgets that exist within JIM, but all of them have elements that exist completely within their containing panels. That is, they don't exceed their containing panels' boundaries as mine do and, therefore, don't require a dynamic panel with scrolling.

I have attached a prototype to demonstrate the current implementation of the slider. Any help would be greatly appreciated.


Slider in its initial state


Slider with the handle in the far left position

Comments (1)


Dear @eggroll,

Creating a slider without events is not a good idea if you want to obtain the described behaviour. The example attached should help. Kindly let me know how it goes.


Sonia Durán