Wierd behaviour of slider when value is changed too fast

I have an array of images and a slider which controls a their alpha. At one moment the slider only affects two images - the one which is fading and the one which is appearing. Once an image has fully appeared (alpha = 1) the controlled image pair changes and the image which has just appeared becomes the fading one. And so on, until the end of image array is reached. When the slider is moved slowly everything works and inteded, however when the slider value is changed quickly (by flicking the mouse for example) something breaks and as the result ALL of the images can se somewhat visible. Please see this [1] to understand what’s happening, in case my description isn’t really descriptive enough.

My code:

public class ImageControl : MonoBehaviour

{

[SerializeField] private Image fadingImg, appearingImg;

public Slider slider;
[SerializeField] private int sliderValue;

//Array of all images
public GameObject[] images;

//Array of points on the slider
public List<float> points = null;

//Segment width
[SerializeField] private int segmentWidth, segmentNumber;

private void Start()
{
    segmentNumber = 0;

    CalculatePoints();
}

public void OnSliderChange()
{
    CalculateSegmentNumber();
    ChangeAlpha();
}

private void CalculatePoints()
{
    int numberOfPoints = images.Length - 1;
    Debug.Log("Number of points is: " + numberOfPoints);
    segmentWidth = Mathf.RoundToInt( slider.maxValue / numberOfPoints);
    Debug.Log("Segment width is: " + segmentWidth);

    int i = 0;
    while (i <= 100)
    {
        points.Add(i);
        i += segmentWidth;
    }
}

public void CalculateSegmentNumber()
{
    if (slider.value > 0)
    {
        segmentNumber = (int)Mathf.Floor(slider.value / segmentWidth);

        //This is for debugging
        sliderValue = (int)slider.value;
    }
    else
    {
        segmentNumber = 0;
    }

    if (segmentNumber < 0)
    {
        segmentNumber = 0;
    }
    else if (segmentNumber > points.Count)
    {
        segmentNumber = points.Count - 1;
    }
}

private void ChangeAlpha()
{
    int fadingImgIndex = segmentNumber;
    //Debug.Log("Fading image index is: " + fadingImgIndex);
    int appearingImgIndex = segmentNumber + 1;
    //Debug.Log("Appearing image index is " + appearingImgIndex);

    if (appearingImgIndex < images.Length)
    {
        fadingImg = images[fadingImgIndex].GetComponent<Image>();
        appearingImg = images[appearingImgIndex].GetComponent<Image>();
    }

    //Calculates current opacity value based on the slider value
    int corrSliderValue = ((int)slider.value % segmentWidth);
    //Debug.Log("Slider value is: " + slider.value + 
    //"Corrected slider value is: " + corrSliderValue);

    float opacityValue = (float)corrSliderValue * (points.Count -1) / 100;
    //Debug.Log("opacityValue value is :" + opacityValue);

    for (int i = 0; i < images.Length; i++)
    {
        
        if (i == fadingImgIndex)
        {   //Decreases alpha of fading picture
            fadingImg.color = new Color(fadingImg.color.r, fadingImg.color.g, fadingImg.color.b, 1 - opacityValue);
        } else if(i == appearingImgIndex)
        {   //Increases alpha of appearing image
            appearingImg.color = new Color(fadingImg.color.r, fadingImg.color.g, fadingImg.color.b, opacityValue);
        }
        else //sets the alpha of the rest of images == 0 
        {   
            Color color = images*.GetComponent<Image>().color;*

color = new Color(color.r, color.g, color.b, 0f);
}
}
}
}
[1]: Quick slider value change issue - YouTube

you seem to iterate over multiple images while keeping track of the currently fading out and fading in. But since a slider can be anywhere at any time any image can have any alpha at any time. It looks as if skipping over images changes which previous or next image is to be altered before resetting the previous ones, leaving them in their last alpha state. What I suggest is that you assign the alpha to ALL images part of your fader.

  • divide the slider into as many parts as you have images
  • whenever the slider changes, calculate the 0 to 1 value within the portion the slider is currently in, set the corresponding image to it and all other to 0