Text Tooltip Slider with itemstyle="none"

[omer]

Hello guys

i am using demo slider with tooltip in this link Range Slider. 
I need to use slider without item style but with text tooltip.
when user sliding handle i need to display text in tooltip. 
when 1-A
when 2- B etc

any starting point or advice?

Regards

Omer

[Marin Bratanov]

Hello Omer,

I believe the following demo is quite close to your requirement on showing tooltips: http://demos.telerik.com/aspnet-ajax/slider/examples/databinding/defaultcs.aspx.

Another approach would be to use the drag handles and the OnClientValueChanged event to get the new value as well as the handle that was dragged, then set the value (or a modified string, depending on your custom scenario) to the tooltip. I am attaching to this post a simple page that shows this in action and uses the demo you linked as base: http://screencast.com/t/PZoeacEOej.

All the best,
Marin
the Telerik team

[omer]

Thank you for your answer Marine. 
I will try both of advice. 
By the way can you help me to set logic of this java script code?
I need display text in my slider tooltip with itemstyle="none"
Thank you in advance..

Ömer

    <script type="text/javascript">
        var theTooltip = null;
        function pageLoad()
        {
            theTooltip = $find("RadToolTip1");
        }

        function OnClientValueChanged(sender, args)
        {
            var newValue = args.get_newValue();
            var handle = sender.get_activeHandle();
            theTooltip.set_targetControl(handle);
---------
if handle = 1 ;
theTooltip.set_text(A);
if handle = 2 ;
theTooltip.set_text(B);
...
something like this..
-----------------
            theTooltip.set_text(newValue);
            setTimeout(function ()
            {
                theTooltip.show();
            }, 20);
        }
    </script>

[Marin Bratanov]

Hi Ömer,

You can simply create a JavaScript object that will act as a dictionary. You can see how this is done in this article for example (or in any other internet resource). Then, instead of adding a switch statement with many lines of code you can simply add the expected values from the slider as keys for the array (when you create it. When and how this happens is up to your custom logic and scenario) and simply use newValue = myArray[args.get_newValue()]; as this newValue variable is already being set as the text.


Kind regards,
Marin
the Telerik team

[omer]

Thank you for reply. 

i did it like your advice and it works.

var myArray = new Array();
myArray['1'] = 'sample1';
myArray['2'] = 'sample2';
myArray['3'] = 'sample3';
myArray['4'] = 'sample4';
newValue = myArray[args.get_newValue()];
tooltip.set_text(newValue);

[omer]

any advice for range slider tooltip? :)

function UpdateToolTipText2(tooltip, slider) {
    var div = document.createElement("div");
    div.style.whiteSpace = "nowrap";
    if (slider.get_itemType() == Telerik.Web.UI.SliderItemType.Item)
        div.innerHTML = (slider.get_selectedItems()[0].get_text() + " / " + slider.get_selectedItems()[1].get_text());
    else
        div.innerHTML = (slider.get_selectionStart() + " / " + slider.get_selectionEnd());

    tooltip.set_contentElement(div);
}

[rdmptn]

I am not sure what your problem with this code is or what you are trying to achieve, but have you examined the Online demos? There is a demo with a range slider and a tooltip right here: http://demos.telerik.com/aspnet-ajax/slider/examples/rangeslider/defaultcs.aspx. You can take a look at the slider demos and at the tooltip demos for more ideas. You can also examine their documentation for an API list - here for the slider, and here for the tooltip.

[omer]

i need to iplement this logic to tooltip which for rangeslider.

regards