Just Look At My Range!


In this video we are going to take a look at the HTML5 range input type, or as Symfony calls it - the RangeType Field.

Using the range form field type will give us a draggable slider, allowing our website users to select between some minimum and maximum value, a default value, and an optional 'step' value.

All of this can be used without Symfony, e.g. by plain old HTML:

<input type="range"
       min="50"
       max="500"
       value="250"
       step="25">

Generally this range slider is useful when a large range of number options exist, and a drop down box would be a bit clunky / overloaded with choices. It's also quite nice to use on mobile devices.

Of course, this being Symfony, you might find that the first time you use this RangeType form field, that it isn't super obvious / intuitive as to how to specify those min, max, and other values.

Fortunately, once you have been shown though, it is pretty straightforward:

// src/AppBundle/Form/Type/YourFormType.php

use Symfony\Component\Form\Extension\Core\Type\RangeType;

// *snip*

    public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
             ->add('rangeValue', RangeType::class, [
                 'attr' => [
                    'min'   => 10,
                    'max'   => 20,
                    'step'  => 2,
                    'value' => 15
                 ]
             ])
             ->add('save', SubmitType::class)
         ;
     }

In this instance I would expect to have a rangeValue property on my underlying entity - no different to any of the other forms we have used so far in this series.

Remember to add in the use statement for the RangeType, or this won't work at all.

Each of our form fields that we add using the form builder will allow us to pass in a third parameter - an array of options. This array is optional, so if we don't pass it in, or we do pass in the array but we don't specify every value, it will default back to the ... ahem, defaults.

The defaults for the range slider come from the HTML5 specification, setting the following values:

  • min: 0
  • max: 100
  • value: min + (max-min)/2, or min if max is less than min
  • step: 1

Should you wish to, you can read more on this on the Mozilla Developer Network documentation.

The fact that these values are HTML5 values rather than Symfony-specific form constructs is the reasoning - I believe - that we pass these through as attr (attributes), which will be added in to the resulting input HTML output, rather than having to specify them something like:

// this is wrong!
 ->add('rangeValue', RangeType::class, [
    'min'   => 10,
    'max'   => 20,
    'step'  => 2,
    'value' => 15
 ])

Bootstrap 3 Range Slider

The downside to the default range slider - even if we use the Bootstrap 3 layout provided by Symfony - is that it looks pretty basic. It's certainly not something you would be happy showing to a client / manager for anything other than a quick prototype, let alone putting on your real live website.

Instead, I opted for a quick Google which led me to Kyle Kemp and Rohit Kalkur's rather swanky seiyria/bootstrap-slider.

I want to stress, I used this as it was the first result I found on Google, rather than having any other valid business reason for doing so.

Here's what I did to make this work with Symfony:

    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
    </head>

I have removed all the other lines for brevity. Make sure to include the JavaScript after your Bootstrap JavaScript. Ideally, if using this in a real project then use a tool like Gulp to manage and minify your JavaScripts, rather than using the CDN links as shown here.

Assuming you have followed along with the rest of this tutorial, the only other thing you need to change would be the options passed in from your Symfony form type:

// src/AppBundle/Form/Type/YourFormType.php

use Symfony\Component\Form\Extension\Core\Type\RangeType;

// *snip*

    public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
             ->add('rangeValue', RangeType::class, [
                 'attr' => [
                    "data-provide" => "slider",
                    "data-slider-ticks" => "[1, 2, 3, 4]",
                    "data-slider-ticks-labels" => '["short", "medium", "long", "xxl"]',
                    "data-slider-min" => "1",
                    "data-slider-max" => "4",
                    "data-slider-step" => "1",
                    "data-slider-value" => "2",
                    "data-slider-tooltip" => "hide",
                    "style" => "width:100%;"
                 ]
             ])
             ->add('save', SubmitType::class)
         ;
     }

Again, you'd probably want to fix the styling issue in whatever system you have used for your CSS (SASS, or LESS, or whatever).

For reference, all I have done is copied the options from here and made them Symfony form type friendly :)

Code For This Course

Get the code for this course.

Episodes