Slider Object customization

Ignition
4

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

5 Likes