11/4/17

Input Range Slider with Color Indicator

              , ,       No comments    

The HTML input type range lets us specify a numeric value which falls within a min and max value. For some use cases, we want to style the control in such a way that provides a visual feedback that is related to the selected value.  In our example, we can create a slider control that maps to three different system statuses:

Status
Control Value
Background Color
Down
1
Red
Idle
2
Gray
Running
3
Green



We want to be able to change the background color of the thumb control to match the slider value. In order to do this, we first need to create the base CSS classes to style the control. We are also creating some thumb classes with the corresponding background color.


    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 30px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
        .slider:hover {
            opacity: 1;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: gray;
            cursor: pointer;
        }

    .thumb1::-webkit-slider-thumb {
        background: red;
    }

    .thumb2::-webkit-slider-thumb {
        background: gray;
    }

    .thumb3::-webkit-slider-thumb {
        background: green;
    }

Now that we have styled our control, we want to map the selected slider value to a CSS class that we defined. We can do this by using the range control oninput event which fires when the value changes.


    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");

    var thumb = {"1":"thumb1","2":"thumb2","3":"thumb3"};
    output.innerHTML = thumb[slider.value];

    slider.oninput = function() {
      output.innerHTML =thumb[this.value];
      slider.className = 'slider ' + thumb[this.value];
    }

In the code, we define a hash table with the possible slider values as keys. This enables us to quickly resolve the class name for the current value. When the value changes, we set the range controller class name to the slider base class plus the thumb class which provides the button background color.



With this article, we are able to show how easy it is to style the range input control to make it provide better visual feedback to the end users.

Originally published by ozkary.com

0 comments :

Post a Comment

What do you think?