extended slider

src/App/Controls/ExtendedSlider.cs

@@ -0,0 +1,16 @@
+using Xamarin.Forms;
+
+namespace Bit.App.Controls
+{
+    public class ExtendedSlider : Slider
+    {
+        public static readonly BindableProperty ThumbBorderColorProperty = BindableProperty.Create(
+            nameof(ThumbBorderColor), typeof(Color), typeof(ExtendedSlider), Color.Gray);
+
+        public Color ThumbBorderColor
+        {
+            get => (Color)GetValue(ThumbBorderColorProperty);
+            set => SetValue(ThumbBorderColorProperty, value);
+        }
+    }
+}

src/App/Pages/Generator/GeneratorPage.xaml

@@ -35,7 +35,8 @@
                     Text="{Binding Password}"
                     Margin="0, 20"
                     StyleClass="text-lg"
-                    HorizontalOptions="Center" />
+                    HorizontalOptions="Center"
+                    LineBreakMode="CharacterWrap" />
                 <StackLayout Orientation="Horizontal">
                     <Button Text="{u:I18n RegeneratePassword}"
                         HorizontalOptions="FillAndExpand"
@@ -92,6 +93,25 @@
                     </StackLayout>
                 </StackLayout>
                 <StackLayout Spacing="0" Padding="0" IsVisible="{Binding IsPassword}">
+                    <StackLayout StyleClass="box-row, box-row-slider">
+                        <Label
+                            Text="{u:I18n Length}"
+                            StyleClass="box-label, box-label-regular"
+                            VerticalOptions="CenterAndExpand" />
+                        <Label
+                            Text="{Binding Length}"
+                            StyleClass="box-label, box-sub-label"
+                            VerticalOptions="CenterAndExpand"
+                            HorizontalTextAlignment="End" />
+                        <controls:ExtendedSlider
+                            Value="{Binding Length}"
+                            StyleClass="box-value"
+                            VerticalOptions="CenterAndExpand"
+                            HorizontalOptions="FillAndExpand"
+                            Minimum="0"
+                            Maximum="128" />
+                    </StackLayout>
+                    <BoxView StyleClass="box-row-separator" />
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="A-Z"

src/App/Styles/Base.xaml

@@ -2,7 +2,8 @@
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="Bit.App.Styles.Base"
-                    xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl">
+                    xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl"
+                    xmlns:controls="clr-namespace:Bit.App.Controls">
 
     <!-- General -->
     <Style TargetType="Label"
@@ -50,6 +51,16 @@
         <Setter Property="FontAttributes"
                 Value="Bold" />
     </Style>
+    <Style TargetType="controls:ExtendedSlider">
+        <Setter Property="MinimumTrackColor"
+                Value="{StaticResource SliderTrackColor}" />
+        <Setter Property="MaximumTrackColor"
+                Value="{StaticResource SliderTrackColor}" />
+        <Setter Property="ThumbColor"
+                Value="{StaticResource SliderThumbColor}" />
+        <Setter Property="ThumbBorderColor"
+                Value="{StaticResource SliderThumbBorderColor}" />
+    </Style>
     
     <!-- Buttons -->
     <Style TargetType="Button"
@@ -264,6 +275,13 @@
         <Setter Property="Spacing"
                 Value="10" />
     </Style>
+    <Style TargetType="StackLayout"
+           Class="box-row-slider">
+        <Setter Property="Orientation"
+                Value="Horizontal" />
+        <Setter Property="Spacing"
+                Value="10" />
+    </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
            Class="box-row-button">

src/App/Styles/Dark.xaml

@@ -25,6 +25,10 @@
     <Color x:Key="ListItemBorderColor">#f0f0f0</Color>
     <Color x:Key="ListHeaderTextColor">#3c8dbc</Color>
 
+    <Color x:Key="SliderThumbColor">#ffffff</Color>
+    <Color x:Key="SliderThumbBorderColor">#b5b5b5</Color>
+    <Color x:Key="SliderTrackColor">#3c8dbc</Color>
+
     <Color x:Key="FabColor">#3c8dbc</Color>
     <Color x:Key="FabPressedColor">#3883af</Color>
 </ResourceDictionary>

src/App/Styles/Light.xaml

@@ -25,6 +25,10 @@
     <Color x:Key="ListItemBorderColor">#f0f0f0</Color>
     <Color x:Key="ListHeaderTextColor">#3c8dbc</Color>
 
+    <Color x:Key="SliderThumbColor">#ffffff</Color>
+    <Color x:Key="SliderThumbBorderColor">#b5b5b5</Color>
+    <Color x:Key="SliderTrackColor">#dddddd</Color>
+
     <Color x:Key="FabColor">#3c8dbc</Color>
     <Color x:Key="FabPressedColor">#3883af</Color>
 </ResourceDictionary>