Snap to a specific value

[Nicolas]

Hello,

Is it possible to have the slider snap to one specific value?

I have a slider ranging from 0.2 to 3 (it represents a zoom ratio) and I would like to be able to freely move it but have it snap at 1 (say between 0.95 and 1.05 for instance) in order to easily set it back to 1 (100% zoom).

From my understanding IsSnapToTicksEnabled will snap to defined ticks but this means that no other value than those ticks can be selected. 

Can this be achieved?

Thanks

[Petar Mladenov]

Hello Nicolas,

Could  you please examine this approach and let me know if it fits in your scenario:

<Grid x:Name="LayoutRoot" Background="White">
      <StackPanel Orientation="Horizontal">
          <telerik:RadSlider
                  x:Name="sliderAlpha"
                  Width="200"
                  Minimum="0"
                  Maximum="3"
                  Value="1"
                  Ticks="1"
              ValueChanged="sliderAlpha_ValueChanged"
              />

          <TextBlock Text="{Binding Value, ElementName=sliderAlpha}" Margin="20 0 0 0"/>
      </StackPanel>
  </Grid>

public MainPage()
        {
            InitializeComponent();

        }

        private void sliderAlpha_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (this.sliderAlpha != null)
            {
                if (e.NewValue >= 0.9d && e.NewValue <= 1.1d)
                {
                    this.sliderAlpha.IsSnapToTickEnabled = true;
                }
                else
                    this.sliderAlpha.IsSnapToTickEnabled = false;
            }
        }

Feel free to ask if you need further assitance.

All the best,
Petar Mladenov
the Telerik team

[Nicolas]

Hello,

This code does make the slider snaps around 1, but then it is stuck at 1 unless I go to 0.5 or 1.5. I can see that the ValueChanged is not fired until then, which is why is IsSnapToTickEnabled property remains True.

[Petar Mladenov]

Hi Nicolas,

Please accept my apologies for the non-working solution in the previous post. Could you please try the following approach and let us know whether it satisfies your needs completely ?

<Grid x:Name="LayoutRoot" Background="White">
     <StackPanel Orientation="Horizontal">
         <telerik:RadSlider
               x:Name="sliderAlpha"
               Width="200"
               Minimum="0"
               Maximum="10"
               ValueChanged="sliderAlpha_ValueChanged"
           />
         <TextBlock Text="{Binding Value, ElementName=sliderAlpha}" Margin="20 0 0 0"/>
     </StackPanel>
 </Grid>

private void sliderAlpha_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (this.sliderAlpha != null)
            {
                if (e.NewValue >= 4.9d && e.NewValue <= 5.1d)
                {
                    sliderAlpha.TickFrequency = 1;
                    this.sliderAlpha.IsSnapToTickEnabled = true;
                }
                else
                {
                    this.sliderAlpha.IsSnapToTickEnabled = false;
                    this.sliderAlpha.TickFrequency = 0;
                }
            }
        }

Do not hesitate to ask if you need more info on this.

All the best,
Petar Mladenov
the Telerik team

[Nicolas]

Hello Petar,

Thank you for coming back to this.

Unfortunately this solution does not work in my case. 

a) This displays ticks when the slider is snapped and hides them when it is not snapped which is not what I want.
b) It does not work with my slider which has ticks defined already.

Please find below the full declaration of the Slider:

<telerik:RadSlider Grid.Row="1" Value="{Binding ZoomLevel, Mode=TwoWay}" Orientation="Vertical" Margin="0 8 0 12" HorizontalAlignment="Center" FontSize="9"
                   Ticks="1,2" TickPlacement="BottomRight" ValueChanged="RadSlider_ValueChanged"
                   Minimum="{Binding ZoomLevelMin}" Maximum="{Binding ZoomLevelMax}">

ZoomLevelMin is 0.2 and ZoomLevelMax is 3. The slider displays ticks at 1 and 2 as well as min and max values. However I want to only snap at 1.

Thanks

[Petar Mladenov]

Hello Nicolas,

The suggested solution won't work in your case since the Ticks defined  in XAML have bigger priority than the TickFrequency defined in code behind. Since your scenario is more like a custom application logic , we created a feature request in our PITS  (Slider: Snap only to certain ticks) that will be soon available for voting.

Greetings,
Petar Mladenov
the Telerik team

[Nicolas]

Hello Petar,

Alright! Thanks for putting this in PITS, I voted for this and I'm now tracking this issue.

Thank you.