WPF: Binding slider and textbox

This entry is part 23 of 54 in the series Learn WPF

When we move the slider, we can have the text in the TextBox updated accordingly.

Using a two-way mode, when we update the value in the TextBox, we can have the slider to move according to the value in the TextBox too.

In the previous example, when we move the slider, the font size changes accordingly.  This behaviour is actually controlled by UpdateSourceTrigger property.  As we did not specify its value, it is in its default state which then depends on the source that it is bound to.

The default value for most properties is PropertyChanged, while the Text property has a default value of LostFocus.

The example below best illustrate the LostFocus property of a slider which in this case is the source.  The TextBox is the target.

MainWindow.xaml
<Window x:Class="SliderName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <TextBox Text="{Binding Path=Value, ElementName=slider, UpdateSourceTrigger=LostFocus, Mode=TwoWay}" Grid.Row="0" FontSize="20" MaxWidth="50"/>
        <Slider x:Name="slider" Grid.Row="1" Minimum="10" Maximum="80" Value="30" IsSnapToTickEnabled="True"/>
    </Grid>
</Window>

slidertextbox

If you click on the slider and move along the line, the value in the textbox will change accordingly.

In this example, we also have a two-way mode binding and a LostFucus value in UpdateSourceTrigger.  If you change the value in the TextBox and click the mouse pointer not on the slider but right below the slider simulating a lost focus click, the slider will move depending on the value in the TextBox.

WPF: Data binding with slider

This entry is part 22 of 54 in the series Learn WPF

Here we create a slider that affects the font size of a TextBlock without any code behind.

When a slider is moving, it changes the font size of a TextBlock directly.  This is done with only XAML.

<Window x:Class="SliderName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Text="This is a sizing text" FontSize="{Binding Path=Value, ElementName=slider}" TextAlignment="Center" VerticalAlignment="Center"/>
        <Slider x:Name="slider" Grid.Row="1" Minimum="10" Maximum="80" Value="30" IsSnapToTickEnabled="True"/>
        <TextBox  Text="{Binding Path=Value, ElementName=slider}" Grid.Row="2" FontSize="20"/>
    </Grid>
</Window>

This example also illustrates element to element data binding.  The source here is the value of the Slider and the target is the font size of the TextBlock.

Here I also added a TextBlock, line 13, that is bound to the value of the Slider.

slider

 

 

 

 

HTML5: Create a slider using range

This entry is part 23 of 34 in the series HTML5

The range input type creates a slider interface.

And like the number input type, it can use the min, max, and step attributes.

<input min='0' max='10' step='1' required type='range' id='range_id' name='range'/>

We use a unit step of 1 for the example.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Slider</title>
</head>
<body>
<form>
    <label for='range_id'>Volume Control</label>
    <input min='0' max='10' step='1' required type='range' id='range_id' name='range'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

I have tried out the slider in the different browsers.

Here is Chrome implementation.  Slider is supported in Chrome.

chrome_slider

Here is the mozilla implementation.  It is not supported.

firefox_slider

 

 

Here is the Safari implementation.  It is supported.

Safari_slider

 

Here is the IE implementation.  It is supported.

ie_slider

 

jQuery UI & Slider: Snap to increment

This entry is part 2 of 11 in the series jQuery UI Slider

jQuery UI Slider – Snap to increments

Increment slider values with the step option set to an integer, commonly a dividend of the slider’s maximum value.

The default increment is 1.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Snap to increments</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider').slider({
                value: 100,
                min: 0,
                max: 500,
                step: 50,
                slide: function (event, ui) {
                    $('#amount').val('$' + ui.value);
                }
            });
            $('#amount').val('$' + $('#slider').slider('value'));
        });
    </script>
</head>
<body>

<p>
    <label for='amount'>Donation amount ($50 increments):</label>
    <input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;'>
</p>

<div id='slider'></div>

</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Slider: Vertical range slider

This entry is part 4 of 11 in the series jQuery UI Slider

jQuery UI Slider – Vertical range slider

Change the orientation of the range slider to vertical.

Assign a height value via .height() or by setting the height through CSS, and set the orientation option to “vertical.”

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Vertical range slider</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider-range').slider({
                orientation: 'vertical',
                range: true,
                values: [ 17, 67 ],
                slide: function (event, ui) {
                    $('#amount').val('$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]);
                }
            });
            $('#amount').val('$' + $('#slider-range').slider('values', 0) +
                    ' - $' + $('#slider-range').slider('values', 1));
        });
    </script>
</head>
<body>

<p>
    <label for='amount'>Target sales goal (Millions):</label>
    <input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;'>
</p>

<div id='slider-range' style='height:250px;'></div>


</body>
</html>
Try The Code Slider Widgets API Doc