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 >>

About these ads

24 thoughts on “WPF Range Slider Control

  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?

  2. 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?

  3. 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

  4. 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 :)

  5. Hi Marlon,

    I used XAML bindings for the properties RangeStart, RangeStop, RangeStartSelected and RangeStopSelected. So the PropertyChanged order isn’t determined. A PropertyChanged on RangeStart and RangeStop will cause a calculation of the movableRange field, PropertyChanged on RangeStartSelected and RangeStopSelected will not, so the default for movableRange will be used. And the default is 0, and it’s a divisor. A calculation of movableRange with the RangeStart and RangeStop (and MinRange) defaults will result 1. I suggest to set the initial value of the field movableRange to 1 also, this will prevent strange errors if data binding is used.

    Regards
    Nick

  6. Pingback: WPF Range Slider « Tech Tock

  7. If the RangeSelectedStart and RangeSelectedStop values are bound (using {Binding startvalue} for example) the bindings are removed, as soon as the control changes the value. If the value is changed manually, the control will display the new value but if the control updates it’s value, the binding gets lost:

    GetBindingExpression(RangeStartSelectedProperty) == null –> false

    SetValue(RangeStartSelectedProperty, value);

    GetBindingExpression(RangeStartSelectedProperty) == null –> true

    Anyone has an idea? :/

  8. Tristan,

    I have no idea, but I tried as follows and it works.

    namespace WpfApplication1
    {
    class Window1VM
    {
    private int _S = 20;
    public int S
    {
    get { return _S; }
    set
    {
    // set a breakpoint
    _S = value;
    }
    }
    private int _E = 90;
    public int E
    {
    get { return _E; }
    set
    {
    // set a breakpoint
    _E = value;
    }
    }
    }
    }

    Regards, Nick

  9. Posting XAML isn’t really supported, next try.. :)

    <Window
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:l=”clr-namespace:WpfApplication1″
    xmlns:c=”clr-namespace:AC.AvalonControlsLibrary.Controls;assembly=AvalonControlsLibrary”
    Title=”Window1″ Height=”300″ Width=”300″>
    <Window.DataContext>
    <l:Window1VM />
    </Window.DataContext>
    <Grid>
    <c:RangeSlider RangeStart=”0″ RangeStop=”100″
    RangeStartSelected=”{Binding S, Mode=TwoWay}”
    RangeStopSelected=”{Binding E, Mode=TwoWay}” />
    </Grid>
    </Window>

  10. Hey guys,

    thank you – you solved my problem. Actually I only forgot the bindingmode… thought TwoWay was the default behavior?

    How ever – it works now. Thank you very much!

  11. There seems to be a memory leak with the RangeSlider. It’s really obvious in my datatemplate / itemscontrol anyone else see this?

    • Kind of late, but I managed to fix it by including the control border sizes in the ReCalculateWidths method, otherwise it kept entering in an infinite control resize loop.

  12. Is it alright if I repost a few of your articles so long as I provide credit and sources back to wordpress.
    com? My website is on the exact same focus as yours and my readers would undoubtedly gain from a lot
    of the articles you give here. Please let me know if this would be fine.

    Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s