slider changing "left" value depends on start position

[thefest29]

Hello guys.

I’m using Corona SDK v2016.2830 and creating widget “Slider”:

local dh = 540 local dw = 960 local lvl1 = 100 local lvl2 = 100 local slider1 = widget.newSlider( { top = dh\*0.26, left = dw\*0.74, width = 140, value = lvl1 } ) local slider2 = widget.newSlider( { top = dh\*0.36, left = dw\*0.74, width = 140, value = lvl2 } ) viewGroup:insert( slider1 ) -- viewGroup is group created via display.newGroup( ) viewGroup:insert( slider2 )

everything works perfect. ( I’m using my own theme for widget, but bug appears on all default themes )

But when i’m changing  lvl1 to 0 - slider1 is moves in x axis

Is it by design or a bug and how to fix it?

Thanks in advance

[rob]

This bug was reported a couple of days ago. There probably isn’t a quick fix on our side for it, but there is a work around.

When the handle is in the middle, the bounding box around the slider is measured by the line. When you place the handle to a point where it extends past the line, the bounding box is bigger at which point positioning them because difficult.

The work around is to create the widget with a value of 50% and immediately use the :setValue() method to the actual value. Here’s it he proof-of-concept code I used to demonstrate this to the other person running into this issue:

local slider1 = widget.newSlider{top = 100, left = 50, value = 50 } local slider2 = widget.newSlider{top = 150, left = 50, value = 50 } slider2:setValue(2)

This way, when creating and positioning the slider, the handle will be completely inside the lines and the positioning will work as expected.

[thefest29]

@Rob Miracle, Thank you. unfortunately it’s not work for me. 

But you gave me a idea.

-- create slider2 slider2.alpha = 0 timer.performWithDelay( 1, function( event ) slider2.alpha = 1 slider2:setValue( level ) end )

and it’s work

[redninjacat]

The solution that @thefest29 used does not work for me because the slider is on a transitioning overlay and I found that the only way to use that solution is to wait until the overlay has fully transitioned into place. I did manage to find another work-around though! In fact, this work-around could probably easily be implemented in the widget library by the Corona engineers.

My fix is to add an invisible rectangle to the slider group. This forces the slider group to always take into account the potential of the handle being at the far left or far right. I am using a horizontal slider so my code that I will show below will only work for a horizontal slider, but it can easily be adapted to work with the vertical slider if you look at the widget source code (https://github.com/coronalabs/framework-widget/blob/master/widgetLibrary/widget_slider.lua).

Here is my code:

local sliderSheet = ... create sheet ... local options = { sheet = sliderSheet, leftFrame = 1, fillFrame = 2, middleFrame = 3, rightFrame = 4, handleFrame = 5, frameWidth = 0.5 \* size, frameHeight = size, handleWidth = 2 \* size, handleHeight = 2 \* size, x = x, y= y, orientation = "horizontal", width = sliderWidth, value = sliderValue, listener = listener } local slider = widget.newSlider(options) --Bug fix work around to cause sliders to properly align! local fullw = options.width + slider.\_handle.width local backing = display.newRect( slider, (options.width \* 0.5), slider.\_left.y, fullw, 1) backing.fill = {0,0,0,0}

I am not positive since I have not tested this, but I believe that the equivalent code fix for a vertical slider would be something like this:

local fullh = options.height + slider.\_handle.height local backing = display.newRect( slider, slider.\_top.x, (options.height \* 0.5), 1, fullh) backing.fill = {0,0,0,0}

[rob]

This bug was reported a couple of days ago. There probably isn’t a quick fix on our side for it, but there is a work around.

When the handle is in the middle, the bounding box around the slider is measured by the line. When you place the handle to a point where it extends past the line, the bounding box is bigger at which point positioning them because difficult.

The work around is to create the widget with a value of 50% and immediately use the :setValue() method to the actual value. Here’s it he proof-of-concept code I used to demonstrate this to the other person running into this issue:

local slider1 = widget.newSlider{top = 100, left = 50, value = 50 } local slider2 = widget.newSlider{top = 150, left = 50, value = 50 } slider2:setValue(2)

This way, when creating and positioning the slider, the handle will be completely inside the lines and the positioning will work as expected.

[thefest29]

@Rob Miracle, Thank you. unfortunately it’s not work for me. 

But you gave me a idea.

-- create slider2 slider2.alpha = 0 timer.performWithDelay( 1, function( event ) slider2.alpha = 1 slider2:setValue( level ) end )

and it’s work

[redninjacat]

The solution that @thefest29 used does not work for me because the slider is on a transitioning overlay and I found that the only way to use that solution is to wait until the overlay has fully transitioned into place. I did manage to find another work-around though! In fact, this work-around could probably easily be implemented in the widget library by the Corona engineers.

My fix is to add an invisible rectangle to the slider group. This forces the slider group to always take into account the potential of the handle being at the far left or far right. I am using a horizontal slider so my code that I will show below will only work for a horizontal slider, but it can easily be adapted to work with the vertical slider if you look at the widget source code (https://github.com/coronalabs/framework-widget/blob/master/widgetLibrary/widget_slider.lua).

Here is my code:

local sliderSheet = ... create sheet ... local options = { sheet = sliderSheet, leftFrame = 1, fillFrame = 2, middleFrame = 3, rightFrame = 4, handleFrame = 5, frameWidth = 0.5 \* size, frameHeight = size, handleWidth = 2 \* size, handleHeight = 2 \* size, x = x, y= y, orientation = "horizontal", width = sliderWidth, value = sliderValue, listener = listener } local slider = widget.newSlider(options) --Bug fix work around to cause sliders to properly align! local fullw = options.width + slider.\_handle.width local backing = display.newRect( slider, (options.width \* 0.5), slider.\_left.y, fullw, 1) backing.fill = {0,0,0,0}

I am not positive since I have not tested this, but I believe that the equivalent code fix for a vertical slider would be something like this:

local fullh = options.height + slider.\_handle.height local backing = display.newRect( slider, slider.\_top.x, (options.height \* 0.5), 1, fullh) backing.fill = {0,0,0,0}