3 Replies Latest reply on May 12, 2011 10:04 PM by ShardulSingh

    How Can I Limit the Range that 2 Thumbs Can Select on an HSlider?

    laxmidi Level 1

      Hi,

       

      I've got a Flex 3 project and I'm using FlexlIb's HSlider with 2 thumbs. How do I "bind" the two thumbs together so that they can only select up to a certain value.

       

      In my case, I'm using dates. But, I can give you a simpler case. Let's say I have an HSlider with a track that goes from 0 to 100. It has 2 thumbs. How do I make it so that the thumbs can only choose a range from 0 to 30 anywhere on the track? So the 2 thumbs are tied. They can't choose more than 30.

       

      <code:HSlider id="dateRange"
                 allowThumbOverlap="true" thumbCount="2" showDataTip="false"
                 liveDragging="true" lockRegionsWhileDragging="true"
                 change="dateChange();" 
                 showTrackHighlight="true" tickThickness="5"  width="100%"
                              />

       

      Any suggestions?

       

      Thank you.

       

      -Laxmidi

        • 1. Re: How Can I Limit the Range that 2 Thumbs Can Select on an HSlider?
          ShardulSingh Level 3

          hi

          You mean to say that if you move the first one then the second one should move with the value of first one +30 ?

           

           

          Shardul

          • 2. Re: How Can I Limit the Range that 2 Thumbs Can Select on an HSlider?
            laxmidi Level 1

            Hi Shardul,

             

            Thanks for your message. Yep, that's what I mean.

             

             

            -Laxmidi

            • 3. Re: How Can I Limit the Range that 2 Thumbs Can Select on an HSlider?
              ShardulSingh Level 3

              Hi,

              You can try something like this........

               

              I dont get to time finish it perfectly...........Please hv a look and do the fixes....

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                  <mx:Script>
                      <![CDATA[
                          import mx.controls.sliderClasses.SliderThumb;
                          import mx.events.SliderEvent;
                          import mx.controls.sliderClasses.Slider;

               

                          private function onSliderChange(event:SliderEvent):void {
                              var ct:Slider=Slider(event.currentTarget);
                              ct.values[0] = ct.values[1]-30;
                          }
                         private var thumbMin : SliderThumb;
                         private var thumbMax : SliderThumb;
                         
                          private function onCreationComplete() : void
                          {
                              var thumbMin : SliderThumb = hs.getThumbAt(0);
                              thumbMin.enabled = false;
                              var thumbMax : SliderThumb =  hs.getThumbAt(1);
                          }
                      ]]>
                  </mx:Script>
                 
                  <mx:HSlider id="hs" thumbCount="2"
                      change="onSliderChange(event);" minimum="0" maximum="100" value="{0,30}" creationComplete="onCreationComplete()"/>
              </mx:Application>

               

               

               

               

              with Regards,

              Shardul