I thought I would share the slider widget that I made. It has proven pretty useful in the application I am currently working on so I thought it was worth a share with the greater Tulip community in case someone else is looking for the same.
Nothing too fancy going on here, it is more or less your standard input slider, with the ability to set the color of the left, right, and slider thumb colors as well as the line width. It fires an event outputting the current value of the slider on a scale from 0 to 100 when the thumb is moved.
With style prop left blank:
With styling and the value displayed as a text variable above:
Input:
value <Integer>: here value represents both the starting position of the slider thumb and it’s initial value.
The values ranges from 0-100.
If left blank, the slider will start with an initial value of 50.
styleProp <Object>: The styleProp object is comprised of 4 properties:
leftSliderColor <Color>:
— this will set the color of the slider to the left or below the slider thumb.
— If left blank, the color will be set to light grey.
rightSliderColor <Color>:
— this will set the color of the slider to the right or above the slider thumb.
— If left blank, the color will be set to light grey.
thumbSliderColor <Color>:
— this will set the color of the slider thumb.
— If left blank, the color will be set to light grey.
lineWidth <Integer>:
— this will set the width of the slider line in pixels, accepts a value from 1 to 20.
— If left blank, the width will be set to 10.
Event/Output:
value <Integer>:
an event will fire any time the slider thumb is moved to the left or right emitting the current value of the slider on a scale from 0 to 100.
@kellen.linse this is great, I made one of these for one of our internal apps but I really like yours. Would you be interested in having this published in the library? We would be happy to credit you and let you link out to any personal or professional web pages. Also, if you are interested, we could record a short video of you describing the widget and its use.
I’d be happy to see it published in the library, and to link it out.
I edited my original post to contain the JSON file for the widget.
I’m going to have to decline the video portion though, at least me doing it. If you guys want to make a video feel free! I think it is pretty straight forward, but I’m happy to answer questions about it should you have any.
@kellen.linse Taking a closer look at this widget, any reason why you want it to fire every time the value changes? I think it might be more performant to just change the value (make the prop writable). I would hate to fire about 100 triggers in under a second.
Also, it might be nice to allow the colors to change more often than just widget initialization, that way you could change the color if the value was within some criteria.
With regards to firing, the widget could potentially be modified to allow for different options depending on your need if that was desired. For my need, the slider has to fire as it moves to properly display the change in value in relation to some other values within my app, but the JS could be changed so that the event listener changed based on some input option. If you have some other solution you think would be better I’m open to that
As for the singular style prop vs multi input props, I have tried to limit the number of inputs as increasing the number of input props for custom widgets currently leads to performance issues within the Tulip application. You can see more talk on that here: What we learned about custom widget, many props, and what not to do.
It’s a little more work, but you can still change the colors beyond initialization, you just would need to make a variable representation of the style prop object and modify that instead of a single color variable as you would otherwise.
