# Add ExtendedCheckBox & ExtendedSlider Controls - Advanced Form Controls with Rich Customization

[vickyqu115]

Add ExtendedCheckBox & ExtendedSlider Controls - Advanced Form Controls with Rich Customization

Overview

Added two new advanced controls to OpenSilver.ControlsKit: ExtendedCheckBox and ExtendedSlider. These enhanced form controls provide comprehensive customization through rich DependencyProperties without requiring ControlTemplate redefinition.

Core Concept

• Declarative customization without ControlTemplate override
• Fine-grained control through 25+ DependencyProperties per control
• Consistent behavior via code-based template generation
• Modern design patterns with smooth animations and premium effects

---

ExtendedCheckBox Features

Key Capabilities

• Flexible Text Positioning: Left, Right, Top, Bottom text placement
• Size Variations: Small, Medium, Large, and Custom size options
• Animation Styles: Linear, EaseInOut, Bounce, and None animation types
• Custom Check Marks: Support for custom geometry (stars, hearts, etc.)
• Color Customization: BoxBrush, CheckedBoxBrush, CheckMarkBrush with hover variants
• Advanced Styling: CornerRadius, HasShadow, border properties
• Check Mark Control: Show/None styles with custom geometry support

Usage Example

<ExtendedCheckBox Text="Enable notifications"
                  TextPosition="Right"
                  CheckedBoxBrush="#10B981"
                  BoxBrush="#F3F4F6"
                  AnimationStyle="EaseInOut"
                  CornerRadius="6"
                  HasShadow="True"
                  IsChecked="True"/>

<!-- Custom star rating -->
<ExtendedCheckBox CheckMarkGeometry="M 6,2 L 8,8 L 14,8 L 9,12 L 11,18 L 6,14 L 1,18 L 3,12 L -2,8 L 4,8 Z"
                  CheckedBoxBrush="#F59E0B"
                  Text="Rate this item"/>

---

ExtendedSlider Features

Key Capabilities

• Size Variations: Small, Medium, Large, and Custom size options
• Track Styling: TrackBrush, FillBrush, TrackBorderBrush with thickness control
• Thumb Customization: ThumbBrush, ThumbBorderBrush, size and border control
• Advanced Effects: Drop shadows, corner radius, hover effects
• Smooth Animations: Animated value changes with easing functions
• Flexible Ranges: Support for custom Minimum/Maximum values
• Keyboard Support: Arrow keys, Home/End, Page Up/Down navigation

Usage Example

<ExtendedSlider Value="75"
                Maximum="100"
                SliderSize="Medium"
                FillBrush="#4F46E5"
                TrackBrush="White"
                TrackBorderBrush="#4F46E5"
                TrackBorderThickness="2"
                HasShadow="True"
                IsAnimated="True"/>

<!-- Custom audio mixer style -->
<ExtendedSlider Value="65"
                Minimum="0"
                Maximum="100"
                SliderSize="Custom"
                TrackWidth="300"
                TrackHeight="8"
                ThumbSize="24"
                FillBrush="#10B981"/>

---

Real-World Applications

ExtendedCheckBox

• Settings Panels: Feature toggles with custom styling
• Form Controls: Beautifully styled agreement checkboxes
• Todo Lists: Interactive task completion with animations
• Rating Systems: Custom star/heart geometry for feedback

ExtendedSlider

• Audio Controls: Professional mixer interfaces
• System Settings: Brightness, volume, performance controls
• Data Input: Price ranges, ratings, percentage inputs
• Gaming UI: Health bars, progress indicators

---

Technical Implementation

ExtendedCheckBox Properties (25+)

• Layout: TextPosition, TextMargin, BoxWidth/Height
• Styling: CornerRadius, CheckMarkStyle, CheckMarkGeometry
• Colors: BoxBrush, CheckedBoxBrush, CheckMarkBrush, hover variants
• Effects: HasShadow, AnimationStyle, AnimationDuration
• Interaction: Custom mouse handling with smooth state transitions

ExtendedSlider Properties (20+)

• Layout: TrackWidth/Height, ThumbSize, SliderSize
• Styling: CornerRadius, TrackBorderBrush/Thickness
• Colors: TrackBrush, FillBrush, ThumbBrush, border variants
• Effects: HasShadow, IsAnimated with smooth value transitions
• Interaction: Mouse drag, keyboard navigation, hover effects

---

Testing & Demos

Both controls include comprehensive demo pages showcasing:

• Sophisticated color palettes (Sage, Ocean, Terra, Lavender themes)
• Size and layout variations with live value binding
• Real-world usage scenarios (settings panels, audio mixers)
• Animation and interaction demos with visual feedback
• Premium styling examples with shadows and borders

---

Benefits

For Developers

• Rapid prototyping without ControlTemplate complexity
• XAML-only customization for common design patterns
• Consistent behavior across different styling approaches
• Production-ready controls with comprehensive property sets

For Users

• Smooth animations enhance user experience
• Modern aesthetics with professional styling options
• Accessible design with keyboard navigation support
• Responsive feedback through hover and focus states

[avdynut]

Thanks a lot for implementing these beautiful and useful controls. Could you please fix an issue that sometimes ExtendedSlider does not synchronize the thumb with track value:

_TestExtendedSlider.-.Google.Chrome.2025-07-09.10-43-04.mp4

[barjonp]

The thumb is not synchronized with the value of the Slider when the user continues dragging after the animation starts. To fix it, I suggest to track if the thumb is animated, and if we drag during the animation, we cancel the animation and move the position directly to the appropriate position.