Range Slider Selection Problem

2 posts, 0 answers
  1. Yaron Habot
    Yaron Habot avatar
    2 posts
    Member since:
    Dec 2009

    Posted 27 Jun 2013 Link to this post

    Silverlight 5.0
    Windows
    IE 10.0.9200 
    Silverlight 2013.2 611 JUN 11,2003
    Visual Studio 2012 C#

    When data binding RadSlider's maximum attribute in range mode, the 2 thumbs are stuck at the left edge of the slider and do not move.
    See code below and attached  image
    <telerik:RadSlider x:Name="sldFilterByPrice" VerticalAlignment="Center" Margin="20"
                        HandlesVisibility="Visible" IsSelectionRangeEnabled="True"                
                        TickFrequency="20"
                        TickPlacement="TopLeft"
                        TickTemplate="{StaticResource TickTemplate}"
                        IsSnapToTickEnabled="True"                                   
                        Maximum="{Binding SeatFilterData.SeatFilterByPrice.PriceMax, Mode=OneTime}"
                        Minimum="0"
                        SelectionStart="0"
                        SelectionEnd="150"
                        MinimumRangeSpan="0"
                        MaximumRangeSpan="400"                   
                    />

    It works fine when the Maximum attribute is not bound but set to a number, like 200. See 
    I need to have the Maximum, Minimum, SelectionStart and SelectionEnd data bound oneway and be able to move the thumbs between the selection range. 
    Is there a way to make it happen?

    Thanks.

    public class CSeatFilter
        {
            public class CSeatFilterByPrice
            {
                public List<decimal> Prices { get; set; }
                public double PriceMin
                {
                    get
                    {
                        return (double)Prices.First();
                    }
                }
                public double PriceMax
                {
                    get
                    {
                        return (double)Prices.Last();
                    }
                }
                public decimal SelectedPriceMin { get; set; }
                public decimal SelectedPriceMax { get; set; }
                 
                public CSeatFilterByPrice()
                {
                    Initialize();
                }
     
                private void Initialize()
                {
                    Prices = new List<decimal>();
                    Prices.Add(0.0M);
                    Prices.Add(200.0M);
                    SelectedPriceMin = Prices.First()+50;
                    SelectedPriceMax = Prices.Last()-50;
                     
                }
            }
     
            private CSeatFilterByPrice _seatFilterByPrice = new CSeatFilterByPrice();
            public CSeatFilterByPrice SeatFilterByPrice { get { return _seatFilterByPrice; } }
  2. Yaron Habot
    Yaron Habot avatar
    2 posts
    Member since:
    Dec 2009

    Posted 28 Jun 2013 Link to this post

    Found a workaround:
    Remove SelectionStart, SelectionEnd, MinimumRangeSpan, MaximumRangeSpan
    Added Selection

    <telerik:RadSlider x:Name="sldFilterByPrice" VerticalAlignment="Center" Margin="20"
                        HandlesVisibility="Visible" IsSelectionRangeEnabled="True"                
                        TickFrequency="20"
                        TickPlacement="TopLeft"
                        TickTemplate="{StaticResource TickTemplate}"
                        IsSnapToTickEnabled="True"                                   
                        Maximum="{Binding SeatFilterData.SeatFilterByPrice.PriceMax}"
                        Minimum="0"
                        Selection="{Binding SeatFilterData.SeatFilterByPrice.Selection}"
                    >

    private SelectionRange<double> selection= new SelectionRange<double>(50, 150);;
     
    public SelectionRange<double> Selection
    {
        get
        {
            return this.selection;
        }
        set
        {
            if (this.selection != value)
            {
                this.selection = value;                       
            }
        }
    }

    Now the slider works as expected with the thumbs located at 50 and 150 instead of stuck at 0.
  3. DevCraft banner
Back to Top