Narrow active area on slider handle

[Maggy Hope]

Hi to all

I have constructed a custom skin for a slider which is working fine. My new slider handle is 7 pixels wide which make for a tidy but obvious handle on the slider.
My problem is that I have set my application up so that there is a button that is disabled until the user has interacted with the slider. When the page with the slider on it opens the slider is already set to a value and the user may actually want to keep that value. However there is not a server-side onClick event as far as I can tell only a onValueChanged event. So even if the user clicks on the slider where the handle is, it does not register as the user having interacted with the slider.

Is it possible to have a 7 pixel wide handle but an 'active' area on the handle that is only 1 pixel wide?
Or
How do I get to have a server-side Slider onClick event?

Hopefully that all makes sense.

Thanks

Ralph Price
(Developer for Maggy Hope)

[Tsvetie]

Hello Ralph Price,
As you can see on our online demos, the default Width of the dragHandle is 9 pixels, but the actual number of pixels available for a single value of the slider vary - it can be 1 pixel, less than one pixel, more than 1 pixel.

That is why, to your first question - this is the behavior of the RadSlider control. In case you have problems configuring the control, let us know exactly what those problems are and we will do our best to help you solve them.

Regarding your second question - I hope you will agree with me, that a RadSlider control does not need a Click event. It is a control that resembles a DropDownList rather than a button and in my opinion, a Click event would mean nothing.

In case I understand you correctly, you have a RadSlider control and a disabled button. In order for the users of your site to activate the button, they have to click on the RadSlider - in case they want to keep the initial value of the slider, they have to click the initial value. If this is the case, you should handle the postback to activate the button yourself, as the slider performs a postback only in case its value changes.

For example, you can use the following approach:

1. Define a hidden ASP button - you can hide it with CSS.
2. Attach a handler for the ClientBeforeValueChange event of the RadSlider control.
3. In the OnClientBeforeValueChange handler, get a reference to the hidden button and call its click method.
4. Attach a handler for the server Click event of the hidden button and in the handler, enable the button.

I have attached a simple page that demonstrates my idea.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Maggy Hope]

Hi Tsvetie

your example code worked perfectly and your explanation of the control made good sense. Javascript is not my strong point but reading it a couple more times I think I'll be good.
The last thing to achieve is to get the custom skin that I have working in a non-(master/content) page working in a content page.
Should I post a new question for that problem before I fully describe it?

Thanks

Ralph Price (Developer for Maggy Hope)

[Tsvetie]

Hello Ralph Price,
In case you have problem with your custom skin in a content page, but that skin works correctly in a non-(master/content) page, it would be best if you open a new support ticket and send me both pages and the custom skin together with your question. That way I will be able to reproduce the problem locally and check what causes the problem.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Maggy Hope]

Hi Tsvetie

thank you for confirming that requirement. I will organise some simplified pages that illustrate the issue and send them to you this evening our time.

Regards

Ralph Price

[Maggy Hope]

Hi Tsvetie

for whatever reason after creating a simple example my custom skin worked in the master page situation. I then made the modifications again to my real application pages and it worked!!

Thanks again for your help

Regards

Ralph Price