UWP and ReactiveUI – How do I (sometimes) synchronise two sliders values?

In my XAML I have two sliders and a toggle button:

<Slider
    x:Name="rightSlider"
    Header="Right"
    Maximum="20"
    Minimum="0" />
<Slider
    x:Name="suffixSlider"
    Header="Suffix"
    Maximum="20"
    Minimum="0" />
<ToggleButton
    x:Name="toggleSuffixLockButton"
    Content="Lock" />

In my view code behind I have bound them as follows:

this.Bind(ViewModel,
    viewModel => viewModel.RightSliderValue,
    view => view.rightSlider.Value)
    .DisposeWith(disposableRegistration);
this.Bind(ViewModel,
    viewModel => viewModel.SuffixSliderValue,
    view => view.suffixSlider.Value)
    DisposeWith(disposableRegistration);
this.OneWayBind(ViewModel,
    viewModel => viewModel.SuffixIsLocked,
    view => view.suffixSlider.IsEnabled,
    value => value == false ? true : false)
    .DisposeWith(disposableRegistration);
this.Bind(ViewModel,
    viewModel => viewModel.SuffixIsLocked,
    view => view.toggleSuffixLockButton.IsChecked)
    .DisposeWith(disposableRegistration);

My view model has these declarations:

[Reactive]
public double RightSliderValue { get; set; }
[Reactive]
public double SuffixSliderValue { get; set; }
[Reactive]
public bool SuffixIsLocked { get; set; }

When toggleSuffixLockButton is NOT checked, the user should be able to alter the two sliders independently; this works.

When toggleSuffixLockButton is NOT checked, I want the suffixSlider element to be enabled; this works.

When toggleSuffixLockButton IS checked, I want the suffixSlider element to be disabled; this works.

However, as soon as the toggleSuffixLockButton is checked I also want the suffixSlider value to be immediately set to the value of rightSlider and then every time rightSlider changes (while toggleSuffixLockButton is checked) then suffixSlider should also change to the same value, until toggleSuffixLockButton is NOT checked; this I cannot figure out how to do properly.

I thought had a vague idea of how to do it but I started going round in circles.

Can anyone help?

Extra code (in the view model) added to show the additional problem of ‘double processing’:

private readonly ObservableAsPropertyHelper<string> _theResult;
public string TheResult => _theResult.Value;

_theResult = this
   .WhenAnyValue(
   viewModel => viewModel.RightSliderValue,
   viewModel => viewModel.SuffixSliderValue,
   (right, suffix) => new GenerationParameters(right, suffix))
// .Throttle(TimeSpan.FromMilliseconds(200))
   .DistinctUntilChanged()
   .SelectMany(GetResult) // GetResult simply returns a string based on the right and suffix values.
   .ObserveOn(RxApp.MainThreadScheduler)
   .ToProperty(this, x => x.TheResult, String.Empty);

Whenever locking is on (as per the code supplied below), _theResult gets recalculated for both the RightSliderValue change and the SuffixSliderValue change, one straight after the other (or maybe at the same time since it’s async, I’m not sure).

When the .Throttle() code is uncommented (as I will have it in my actual application) there’s no problem but I was wondering if there was a way not to have to throttle it (just in case I need to do this in future projects).