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

Setting the dual slider's initial values without a flicker during initialization

Expand Messages
  • aichcon
    Is there a way to set a newly created dual slider s default thumb positions at certain locations without it first setting the thumb positions at 0 during
    Message 1 of 4 , Sep 30, 2008
    • 0 Attachment
      Is there a way to set a newly created dual slider's default thumb
      positions at certain locations without it first setting the thumb
      positions at 0 during initialization?

      I have a small app that updates a datagrid when the user modifies a
      dual horizontal slider. After the user modifies the slider, both the
      datagrid and the div that the slider is in is refreshed. When the
      slider div is refreshed, the slider is re-created, and I pass the old
      slider's range values so it stays consistent. I do this by passing
      initVals containing a minVal and maxVal to the slider variable.

      var dual_slider = YAHOO.widget.Slider.getHorizDualSlider
      ("sliderbg","minthumb","maxthumb", range, tickSize, initVals);

      When I do this, there is a brief "flicker" as the slider's positions
      are set to 0 during initializiation, then set to the initVals. Is
      there a way to skip the setting to 0? In the scenario above, it is
      very jarring, as the sliders 'twitch' back to the 0 position once
      they are reloaded.

      The only thing I could think of is setting the positions of the
      thumbs via CSS based on their initVals, but I was wondering if anyone
      had encountered this before or if there was a way for me to do this
      without messing with the YUI codebase.

      Thanks in advance for your help.

      PS If you're still unsure as to what I'm referring to, check out the
      dual slider example on the YUI page - you'll notice the thumb
      locations are first set to 0 when the slider is loaded, and then
      quickly set to the values in the input fields.

      http://developer.yahoo.com/yui/examples/slider/slider_dual_thumb.html
    • Lucas Smith
      ... [snip] Currently the DualSlider has to initialize to 0,0, then apply the initVals. It is on the todo list to remove this requirement in upcoming versions.
      Message 2 of 4 , Sep 30, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "aichcon" <hbakkalbasi@...> wrote:
        >
        > Is there a way to set a newly created dual slider's default thumb
        > positions at certain locations without it first setting the thumb
        > positions at 0 during initialization?
        >
        [snip]

        Currently the DualSlider has to initialize to 0,0, then apply the
        initVals. It is on the todo list to remove this requirement in
        upcoming versions.

        In the mean time, try adding a class to the DualSlider container
        element that applies visibility: hidden to the thumb elements. Then
        subscribe to the DualSlider's 'ready' event to remove the class from
        the container.

        Hope this helps,
        Luke
      • aichcon
        ... Luke - thanks for the workaround. I ve been using it for some time now. Any chance there s an update on the issue? Thanks a lot for your help. Hakan
        Message 3 of 4 , Mar 24, 2009
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "aichcon" <hbakkalbasi@> wrote:
          > >
          > > Is there a way to set a newly created dual slider's default thumb
          > > positions at certain locations without it first setting the thumb
          > > positions at 0 during initialization?
          > >
          > [snip]
          >
          > Currently the DualSlider has to initialize to 0,0, then apply the
          > initVals. It is on the todo list to remove this requirement in
          > upcoming versions.
          >
          > In the mean time, try adding a class to the DualSlider container
          > element that applies visibility: hidden to the thumb elements. Then
          > subscribe to the DualSlider's 'ready' event to remove the class from
          > the container.
          >
          > Hope this helps,
          > Luke
          >

          Luke - thanks for the workaround. I've been using it for some time now. Any chance there's an update on the issue?

          Thanks a lot for your help.

          Hakan
        • Lucas Smith
          ... Sorry Hakan, I didn t have the time to give DualSlider the love it needs for the 2.7.0 release. So for now the workaround is all you have, officially
          Message 4 of 4 , Mar 27, 2009
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "aichcon" <hbakkalbasi@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@> wrote:
            > >
            > > --- In ydn-javascript@yahoogroups.com, "aichcon" <hbakkalbasi@> wrote:
            > > >
            > > > Is there a way to set a newly created dual slider's default thumb
            > > > positions at certain locations without it first setting the thumb
            > > > positions at 0 during initialization?
            > > >
            > > [snip]
            > >
            > > Currently the DualSlider has to initialize to 0,0, then apply the
            > > initVals. It is on the todo list to remove this requirement in
            > > upcoming versions.
            > >
            > > In the mean time, try adding a class to the DualSlider container
            > > element that applies visibility: hidden to the thumb elements. Then
            > > subscribe to the DualSlider's 'ready' event to remove the class from
            > > the container.
            > >
            > > Hope this helps,
            > > Luke
            > >
            >
            > Luke - thanks for the workaround. I've been using it for some time now. Any chance there's an update on the issue?
            >
            > Thanks a lot for your help.
            >
            > Hakan
            >

            Sorry Hakan, I didn't have the time to give DualSlider the love it needs for the 2.7.0 release. So for now the workaround is all you have, officially speaking. I have something in the works, but it still has quite a few kinks to work out. It may be a while before I'm able to polish that up, though.

            There's always the option to create a dual slider effect using two DD instances for thumbs, in which case you can place them wherever you like and just set the DD instance's X or Y constraints accordingly. That's the simplest form of what's under the hood of Slider and DualSlider anyway.

            Luke
          Your message has been successfully submitted and would be delivered to recipients shortly.