5 Replies Latest reply on Feb 1, 2016 12:29 PM by Tokoloshy

    Change slider color when slider is dragged?

    Tokoloshy

      Ok so I have finally managed to create my very own custom sliders.  Now I need the color of the slider track to change from one color to another when the slider knob is moved from Left to Right.  Additionally i need to get the slider knob to snap over to the right after making a small movement with the knob in that direction and then again if moved back to the left position.

       

      I know these are probably noob level things to deal with, but I am stuck.  Any help would be greatly appreciated.

       

      Thanks in advance..

        • 1. Re: Change slider color when slider is dragged?
          kglad Adobe Community Professional & MVP

          tokoloshy wrote:

           

          Ok so I have finally managed to create my very own custom sliders.  Now I need the color of the slider track to change from one color to another when the slider knob is moved from Left to Right.

          create a slider track with a color transform

           

          Additionally i need to get the slider knob to snap over to the right after making a small movement with the knob in that direction and then again if moved back to the left position.

          i don't understand what you're trying to do.

           

          • 2. Re: Change slider color when slider is dragged?
            Tokoloshy Level 1

            Hi kglad

             

            Thank you for the reply.  For the second part I need the slider-knob/button to jump to the right after only moving it a small amount.  Instead of having to move it manually all the way.

            • 3. Re: Change slider color when slider is dragged?
              kglad Adobe Community Professional & MVP

              you want to move how much to the right?  and when do you want it to do that?

               

              typically, sliders move by dragging.  if you do something else while it's being dragged that will be unexpected by your user.

              • 4. Re: Change slider color when slider is dragged?
                ThunderfootMOB Level 1

                Are you creating your slider dynamically or is it a movie clip?

                 

                Can either change the color dynamically through actionscript or you can do it manually using frames.

                 

                moving the slider you might try something like

                 

                if (slider.x += 10){

                slider.x = 50);

                }

                 

                Just some ideas, dont know all too much about what your trying to accomplish

                • 5. Re: Change slider color when slider is dragged?
                  Tokoloshy Level 1

                  Ok so this is what I have... Slider Image.jpg

                  I need the Sliders to change to red as well as the text.  As soon as the slider is moved over to the right.  This will be loaded on a touch screen machine that will act as an "In/Out" indication system.  I also need the slider knob to jump to the complete right or complete left depending on direction.  The last action will just assist in the ease of use for the people checking in or out.  Below is the code as I have it currently, but from here I am lost.  Any help please.

                   

                  var knobWidth:Number = sliderKnob.width;

                  var trackWidth:Number = sliderTrack.width;

                  var trackX:Number = sliderTrack.x;

                  var boundWidth = trackWidth - knobWidth;

                  var boundsRect:Rectangle = new Rectangle(trackX, 0, boundWidth, 0);

                  // Enable drag

                  sliderKnob.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

                  function startDragging(event:MouseEvent) {

                      sliderKnob.startDrag(false, boundsRect);

                  }

                  // Stop drag

                  sliderKnob.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

                  sliderKnob.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);

                  function stopDragging(event:MouseEvent) {

                      sliderKnob.stopDrag();

                  }

                   

                   

                  sliderTrack.addEventListener(MouseEvent.CLICK, snapTo);

                  function snapTo(event:MouseEvent) {

                    MovieClip(parent).mouse_txt.text = "Mouse X on slider is: "+ mouseX;

                      if (mouseX < boundWidth && mouseX > knobWidth) {

                    sliderKnob.x = mouseX;

                    }

                  }

                   

                  Thanks everyone in Advance.