Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Slider > Customizing Slider Tooltip String

• Victor Intermediate

  Posted on Jun 30, 2011 (permalink)

  Hi,
  
  We just started using an want to change the slider tooltip onSlide. One example would be to convert a 0.0 -> 1.0 double slider to show 0% -> 100%. Is there any built-in way to do that?
  
  Also - is it possible to remove the coloring of the slider selection in code? Basically what we want to do is to set "#elem t-slider-selection {display:none;}" with code similair to ...Telerik().Slider<type>().Name("slider").....Value(10).HighlightSelection(hs-value)
  
  where hs-value could be say {none, left, right, both} or something.
  
  
  Thanks
  /Victor

• Dimo Dimo

  Posted on Jun 30, 2011 (permalink)

  Hi Victor,
  
  You can format the tooltip string by using
  
  .Tooltip(t => t.Format("format string here"))
  
  Note that this will also format the labels in the same fashion. As for the selection removal, you can set a custom CSS class to the slider
  
  .HtmlAttributes(new { @class = "noselection" })
  
  and then use it in a proper selector
  
  .noselection .t-slider-selection
  {
       visibility: hidden;
  }
  
  
  Best wishes,
  Dimo
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

• Victor Intermediate

  Posted on Jun 30, 2011 (permalink)

  Thanks for that quick reply!
  
  I take it there is no "good" way of transforming the range in custom way through a function (for example 0.01 => 1%, 0.5 => 50%, 1.0 => 100% or 1 => "First", 2=> "Second", 3=>"Third")?
  
  /Victor

• Dimo Dimo

  Posted on Jun 30, 2011 (permalink)

  Hi Victor,
  
  I am afraid there is no custom transformation capability available. However, this is pretty standard and supported.
  
  0.01 => 1%, 0.5 => 50%, 1.0 => 100%
  
  Kind regards,
  Dimo
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

• Victor Intermediate

  Posted on Jun 30, 2011 (permalink)

  Ok, thanks for those answers.
  
  For us, it would be very nice to have the ability to transform the values in some way. That also means that you indirectly could support all kinds of ranges (dates and such) that I've seen people asking about :)
  
  
  Anyway... We'll do a hack for now, but unfortunately that translates to a quite "flickery" tooltip, so we will be hoping for some extra client event callbacks to be able to transform the tooltip.
  
  Edit: Forgot one thing: We found a bug in that the mouse has to be moved 2px before onSlide gets called. First pixel movement the slider value is updated and the tooltip is shown, but the onSlide event is not triggered.
  
  Thanks again
  /Victor

• Hristo Germanov Hristo Germanov

  Posted on Jul 1, 2011 (permalink)

  Hello Victor,
  
  Thank you for your feedback.
  
  Unfortunately, I was not able to reproduce the issue. Could you point out the steps for reproducing the issue?
  
  I have logged your request as a feature suggestion. You can cast your vote for it here.
  
  All the best,
  Hristo Germanov
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

• Victor Intermediate

  Posted on Jul 1, 2011 (permalink)

  Thanks for addition of feature suggestion. Still though, a simple event (onTooltip with a reference to the tooltip for example) would go a long way in being able to customize the tooltip. Given that e.value and the tooltip DOM elements are available it would be very simple to adapt content or look and feel as one wishes. Sure, the legend would still not be "perfect", but it seems like very little work for quite a big win to me.
  
  
  Anyway, regarding the bug I mentioned. To reproduce:
  

  • Use the Telerik.Web.Mvc.Examples (I used 2011_1_315)
  • Go to the view ClientSideEvents (I used the razor one, but should not matter)
  • Add Min(0) and Max(1000000) to the properties (a double with small increments would show the same behaviour)
  • Run the project and navigate to the Client Side Events part of the slider demos [and select razor]
  • Press the handle ("nothing" happes, that is the tooltip callout is not shown)
  • Move the handle 1px (the tooltip callout is shown, but the onSlide event IS NOT fired)
  • Move the hande 1px more (the tooltip changes and the onSlide IS fired)

  
  
  Lastly another question - When pressing the slidable "range" (the horizontal line) the slider reacts on mouseup, what is the reason for this? Almost all slider-like objects I have worked with reacts on mousedown and then either moves the slider in that direction (windows scrollbars for example) or moves the slider to the cursor position and "grabs" it making it possible to adjust the position before letting go (jQuery UI for example). To me the slider feels quite slow at times, partly due to this, but there is probably a good reason.
  
  /Victor

• Hristo Germanov Hristo Germanov

  Posted on Jul 4, 2011 (permalink)

  Hi Victor,

  Thank you for the advice.
  
  I am glad to inform you that the wrong behavior(slider react to mouseup instead of mousedown) is fixed and it will be include with the next release of Telerik Components for ASP.NET MVC.
  
  With beta release:
  1) We improved the performance of the Slider.
  2) We fixed the bug with wrong value in the tooltip of the Slider.
  
  I have attached a hotfix build which includes the improvement of the Slider.
  
  I have updated your Telerik points.

  Best wishes,
  Hristo Germanov
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Attached files

  • Telerik-Extensions-for-ASPNET-MVC-2011-1-704-hotfix.zip

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Slider > Customizing Slider Tooltip String