Loading ...
Sorry, an error occurred while loading the content.

Dual-thumb Slider with range highlight question

Expand Messages
  • jefffederman
    Hi, I m fairly new to web design, and while familiar enough with JavaScript to make basic modifications to library widgets, I m out of my league with this
    Message 1 of 3 , Aug 1, 2008
    • 0 Attachment
      Hi, I'm fairly new to web design, and while familiar enough with
      JavaScript to make basic modifications to library widgets, I'm out of
      my league with this question...

      I'd like to modify the existing YUI dual thumb slider with range
      highlight, the modification being that the track has THREE different
      colors, e.g., (1) red between the left edge of the track and the left
      handle; (2) orange between the two handles (the range); and (3) yellow
      between the right handle and the right edge of the track.

      Ideally, this slider would output three values in text input boxes:
      (1) the left handle value (red area); (2) the range value (orange
      area); and (3) max value - the right handle value (yellow area).

      Any help you can provide is much appreciated!
    • y_lsmith
      ... I put together an example to illustrate how to accomplish it. http://yuiblog.com/sandbox/yui/v252/examples/slider/slider_tricolor.html Note animation is
      Message 2 of 3 , Aug 4, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "jefffederman"
        <jefffederman@...> wrote:
        >
        > Hi, I'm fairly new to web design, and while familiar enough with
        > JavaScript to make basic modifications to library widgets, I'm out of
        > my league with this question...
        >
        > I'd like to modify the existing YUI dual thumb slider with range
        > highlight, the modification being that the track has THREE different
        > colors, e.g., (1) red between the left edge of the track and the left
        > handle; (2) orange between the two handles (the range); and (3) yellow
        > between the right handle and the right edge of the track.
        >
        > Ideally, this slider would output three values in text input boxes:
        > (1) the left handle value (red area); (2) the range value (orange
        > area); and (3) max value - the right handle value (yellow area).
        >
        > Any help you can provide is much appreciated!
        >

        I put together an example to illustrate how to accomplish it.
        http://yuiblog.com/sandbox/yui/v252/examples/slider/slider_tricolor.html

        Note animation is not used. While possible to incorporate animation,
        it is not trivial at this point, so the example does not include it.

        As to the output of three values, the definition of "values" is vague
        in your case. It seems you are asking for three sub ranges, but you
        could be asking for arrays of start and end points, or the deltas of
        end - start. Separately, those start and end points could be
        interpreted values or strict pixel offsets. DualSlider maintains two
        thumbs. Their respective center point pixel offsets are available at
        mySlider.minVal and mySlider.maxVal. You can add on any functionality
        to your DualSlider instance to calculate and return whatever you
        define as a useful value.

        Hope this helps,
        Luke
      • jefffederman
        ... Luke, this is brilliant! Exactly what I was looking for! Thanks so much for your help! Cheers, Jeff
        Message 3 of 3 , Aug 7, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "jefffederman"
          > <jefffederman@> wrote:
          > >
          > > Hi, I'm fairly new to web design, and while familiar enough with
          > > JavaScript to make basic modifications to library widgets, I'm out of
          > > my league with this question...
          > >
          > > I'd like to modify the existing YUI dual thumb slider with range
          > > highlight, the modification being that the track has THREE different
          > > colors, e.g., (1) red between the left edge of the track and the left
          > > handle; (2) orange between the two handles (the range); and (3) yellow
          > > between the right handle and the right edge of the track.
          > >
          > > Ideally, this slider would output three values in text input boxes:
          > > (1) the left handle value (red area); (2) the range value (orange
          > > area); and (3) max value - the right handle value (yellow area).
          > >
          > > Any help you can provide is much appreciated!
          > >
          >
          > I put together an example to illustrate how to accomplish it.
          > http://yuiblog.com/sandbox/yui/v252/examples/slider/slider_tricolor.html
          >
          > Note animation is not used. While possible to incorporate animation,
          > it is not trivial at this point, so the example does not include it.
          >
          > As to the output of three values, the definition of "values" is vague
          > in your case. It seems you are asking for three sub ranges, but you
          > could be asking for arrays of start and end points, or the deltas of
          > end - start. Separately, those start and end points could be
          > interpreted values or strict pixel offsets. DualSlider maintains two
          > thumbs. Their respective center point pixel offsets are available at
          > mySlider.minVal and mySlider.maxVal. You can add on any functionality
          > to your DualSlider instance to calculate and return whatever you
          > define as a useful value.
          >
          > Hope this helps,
          > Luke
          >

          Luke, this is brilliant! Exactly what I was looking for! Thanks so
          much for your help!

          Cheers,
          Jeff
        Your message has been successfully submitted and would be delivered to recipients shortly.