Slider Object customization

Is there an easy way to modify the existing Vision slider component? I would like to change the blue track color, and make the slider object a pointed shape, instead of the circle. I was hoping there would be a different pointer object on the exchange, but did not find anything. Was going to try to script one/ build my own, but figured I would see if anybody had any recommendations first.

Probably not; some more details in this thread:

I experimented with this, and I didn’t find it to difficult too do with layered shapes and scripting.
Here is the result:




image

Here is a tutorial for anybody who wants to replicate this:

  • Create a container named CustomSliderComponent
  • Use the rectangle tool to create a rectangle in the container named BackDrop that fills the entire container
  • Add a slider to the container, name it CoreComponent, and resize the slider, so it completely fills the container
  • Add a comma zero to the end of the background color to make the slider transparent:
  • image
  • Add four custom “Color” properties to the slider named backDropColor, leftOfPointerColor, rightOfPointerColor, and pointerColor. Then, set the colors to whatever you are going to want them to be
  • Bind the BackDrop’s “Stroke Paint” and “Fill Paint” properties to the Core Component’s backDropColor custom property
  • Use the rectangle tool again to draw a rectangle in the container that covers the entire slider, name it RightValues, and bind it’s “Stroke Paint” and “Fill Paint” properties to the rightOfPointerColor custom property of the CoreComponent:
  • image
  • Copy the RightValues rectangle, and paste a new rectangle directly on top of the copied rectangle. I recommend using Ctrl+P (Size and Position Dialog Box) to ensure that the new rectangle is exactly on top of the RightValues rectangle.
  • Give this new rectangle the name “LeftValues” and bind its “Fill Paint” and “Stroke Paint” properties to the CoreComponent’s leftOfPointerColor custom property. Lastly, change the width of the LeftValues rectangle to approximately half it the width of the slider:
  • image
  • Use the polygon tool to create a custom shape for the pointer within the container. Then, name the shape “Pointer” and bind its “Fill Paint” property to the “pointerColor” custom property of the CoreComponent:
  • image
  • The Project Browser should now look like this:
  • image
  • Add this script the Pointer’s mouseDragged event handler:
abslutePointerWidth = event.source.relWidth*(event.source.parent.getComponent('BackDrop').getSize().getWidth()/event.source.parent.getComponent('BackDrop').relWidth)
if event.x > event.source.parent.getComponent('BackDrop').getSize().getWidth()-abslutePointerWidth:
	system.gui.transform(event.source, event.source.parent.getComponent('BackDrop').getSize().getWidth()-abslutePointerWidth)
elif event.x < 0:
	system.gui.transform(event.source, 0)
else:
	system.gui.transform(event.source, event.x)
event.source.parent.getComponent('CoreComponent').value = int(event.source.parent.getComponent('CoreComponent').minimum+((event.source.parent.getComponent('CoreComponent').maximum-event.source.parent.getComponent('CoreComponent').minimum)*event.source.relX)/(event.source.parent.getComponent('BackDrop').relWidth-event.source.relWidth))
event.source.parent.getComponent('LeftValues').relWidth = (event.source.parent.getComponent('BackDrop').relWidth-event.source.relWidth)-((event.source.parent.getComponent('BackDrop').relWidth-event.source.relWidth)-event.source.relX)
  • Add this script to the CoreComponent’s mousePressed event handler:
if event.source.value > event.source.maximum:
	event.source.value = event.source.maximum
elif event.source.value < event.source.minimum:
	event.source.value = event.source.minimum	
event.source.parent.getComponent('Pointer').relX = ((event.source.parent.getComponent('BackDrop').relWidth-event.source.parent.getComponent('Pointer').relWidth)*(event.source.value-event.source.minimum))/(event.source.maximum-event.source.minimum)
event.source.parent.getComponent('LeftValues').relWidth = (event.source.parent.getComponent('BackDrop').relWidth-event.source.parent.getComponent('Pointer').relWidth)-((event.source.parent.getComponent('BackDrop').relWidth-event.source.parent.getComponent('Pointer').relWidth)-event.source.parent.getComponent('Pointer').relX)

I’ve tested this component in a published state with different window sizes and everything works. Here is the result:
image

image

3 Likes

I did a custom slider with mouse press action, tag value binding changed and Mouse dragged. I have start with the tutorial of @justinedwards.jle I just dont use the componant slider of igntion to do it. Its work fine but dont have the ability to use ‘snap to ticks’ and ‘defer update’ (This can be done for sure).The componant can be resize and use negative min and max value.

CustomSliderComponent.zip (12.8 KB)

2 Likes

I like your use of a linear scale instead of an actual slider for the core component. It works quite well!

1 Like