C# Disciples

my life in Avalon ….

WPF Range Slider Control

[New version fo Range Slider here] 

I know that you guys are waiting for the sorting of the DataGridView control, and I apologize for not completing it

yet. I needed a range slider, so I had to stop for 2 days to create this control… While I was at it I also

created a Magnifier (which is a normal slider but centered i.e when you release the thumb it goes back in the mid

point. more info below)…

The range slider is basically just like a normal slider control but you can select a range instead of a single

point. You can even drag the middle part(which is the selected range area) to move back and forward… It is very

easy to restyle this control, Basically there are 5 main properties that you can set

CenterThumbStyle – this is the area of the selected range (this is a thumb control)
LeftThumbStyle – this is the left slider thumb which is used to expand the range
RightThumbStyle – - this is the right slider thumb which is used to expand the range
LeftRepeatButtonStyle – this is the left edge of the slider (When click on the button you move the range selected

to the left)
RightRepeatButtonStyle – this is the right edge of the slider (When click on the button you move the range selected

to the right)

These properties all accept a style as parameter so that you can re style the control however you want.
Whenever the range is changed an event is raised providing you with the new range (RangeSelectionChanged).
A demo for the range slider + full source code is provided here…

The magnifier is a very simple control. Basically it is a normal slider yet, this slider goes back at the mid-

point(with a nice animation) when the user releases the slider thumb. When the user is holding the thumb to the

left or to the right a Magnified event is raised every x (where x is a TimeSpan set by the user). This can be used

to make a magnifing effect or even shrinking effect accordingly… have a look at the demo to get a better feel of

this control….

Any question, suggestions or comments please feel free to post. It is always nice to hear feedback…

Have fun coding….

Regards

P.S if you have some ideas or need a specific custom control please let me know so that I added to the backlog of

the controls to include in the AvalonControlLibrary

Source code and demo >>

Possibly related posts: (automatically generated)

September 6, 2007 - Posted by marlongrech | .Net 3.0, WPF, WPF Custom Controls | | 11 Comments

11 Comments »

  1. I’m not sure why, maybe I did something stupid.. but If I modify the style you are using inside RangeSliderTest.xaml, nothing would change when I hit F5 to test the project.
    How can I link the resource you built into my own project?

    Comment by Susan | September 6, 2007 | Reply

  2. Can you send me the XAMl so that I can see if there is something wrong, and yes you can use my code in your project

    Comment by marlongrech | September 7, 2007 | Reply

  3. Hi, I’m really interested in your range slider control, but I’m having real problems getting the downloads from your site (any of them) any ideas why I wouldn’t be able to get the files from your download server?

    Comment by Andrew | October 9, 2007 | Reply

  4. Very nice control. It actually helped me a lot for a project I’m working on. Thanks for publishing it!
    -Bob

    Comment by Bob W | October 30, 2007 | Reply

  5. I am necessary wish to find

    Comment by Vedflieft | February 24, 2008 | Reply

  6. Hi Vedflieft,

    I didn’t understand what you are trying to say can you re explain?

    Regards

    Comment by marlongrech | February 24, 2008 | Reply

  7. Range slider got an update in AvalonControlsLibrary v2. all properties are not Dependency properties and also the RangeSelectionChanged event has been updated to a RoutedEvent

    Contact me if you have any issues at marlongrech AT GMAIL DOT COM

    Regards

    Comment by marlongrech | March 2, 2008 | Reply

  8. Is that possible to have text above the ticks in the slider?
    e.g values of the range

    Comment by Imthiyas | March 9, 2008 | Reply

  9. Well you can do anything you want if you supply a ControlTemplate…. If you want send me exactly what you need and I can create a control template for you to give you an example :)

    Comment by marlongrech | March 9, 2008 | Reply

  10. Thanks so much, this will be a big help with one of my projects :)

    Comment by fernandojhoel | April 23, 2008 | Reply

  11. Where’s the screenshots? Just do ctrl-printscreen and paste in Paint, save as png and upload with wordpress.

    Comment by mike | July 29, 2008 | Reply


Leave a comment

« Previous | Next »