Skip to content

Attributes

Name
TitleHorizontalAlignment
Spacing
SelectedTime
Value
Maximum
SegmentCount
SegmentTitles
TotalTime
TimeSegments

Events

Name
ValueChanged
SelectedTimeChanged
DragStarted
DragCompleted
SegmentChanged

Methods

Name
GetItemsRepeater
GetSegments

Simple Example

xml
<dev:SegmentedSlider x:Name="SegmentedSliderSample" SegmentCount="5" Spacing="5"/>
cs
SegmentedSliderSample.SegmentTitles = new List<string>
{
    "Very Low",
    "Low",
    "Medium",
    "High",
    "Very High",
};

SegmentedSlider

Time Based Example

xml
<dev:SegmentedSlider x:Name="SegmentedSliderSample" TotalTime="01:20:00" Spacing="5"/>
cs
SegmentedSliderTimeSample.TimeSegments = new List<SegmentedSliderTimeInfo>
{
    new SegmentedSliderTimeInfo
    {
        StartTime = TimeSpan.Zero,
        EndTime = new TimeSpan(0, 30, 0), // first 30 minutes
        Title = "Intro"
    },
    new SegmentedSliderTimeInfo
    {
        StartTime = new TimeSpan(0, 20, 0),
        EndTime = new TimeSpan(1, 0, 0), // 30-60 minutes
        Title = "Main Part"
    },
    new SegmentedSliderTimeInfo
    {
        StartTime = new TimeSpan(1, 0, 0),
        EndTime = new TimeSpan(1, 20, 0), // 60-80 minutes
        Title = "Ending"
    }
};

SegmentedSlider

WARNING

If you want to use Time Based Segments, dont set SegmentCount, and if you want to use Simple Mode, dont set TotalTime.

Demo

you can run demo and see this feature.

Released under the MIT License.