H5 type of input in the range of landscaping and

Currently in the development of the mobile web, the use of the range to the type of input, related to the landscaping, then the next question gave you talk about landscaping

1, how to use the slider bar?
Usage is very simple, as follows:

<INPUT type = "Range" value = "0">
. 1
. 1
-browser original style as follows:
the Chrome: 
Firefox:  
IEs 9+:      
Common (part) following attributes:

Attribute Description
max set or returns slider control maximum
min sets or returns the minimum value of the slider control
step sets or returns increments each time when dragging the slider control
value is provided to return the slider control, or the value attribute
defaultValue sets or returns the slider control the default value
autofocus Sets or returns whether the slider control should automatically get focus when the page loads


2, how to beautify the slider?
First, a question which way to complete the beautification of the slider? At present I can think of two options is as follows:

by direct style css complete transformation of
the slider hidden (set opacity: 0), custom div achieved by
the introduction of the first to be a relatively simple implementation.


3. What specific implementation is?
Landscaping slider control, complete the following five steps:

removal system default style;
To the slide rail (track) to add style;
a slider (thumb) to add style;
fill the progress bar slider according to location;
multi-browser compatible.
These are the realization of the entire process slider control landscaping. Today we want to achieve the effect is this: If you want to achieve the effect of filling the progress bar can be used in more than 9 in IE browser :: - ms-fill-lower and :: - ms-fill-upper from the definition of progress to achieve the effect of filling, so first for the Chrome browser for the entire process and the Chrome browser does not support directly the progress bar; -; moz-range-progress bar to customize the Firefox browser can through ::.

3.1 removal system default style
custom styles to beautify this is the first step slide control, this operation is not to use the original style, the after effect. The code is simple as shown below, but note that webkit-based browsers, such as Chrome, Safari, Opera, etc., should also remove the default slider style.

INPUT [type = Range] {
    -webkit-Appearance: none;
    width: 300px by;
    border-RADIUS: 10px; / * set the attribute so that when the pattern of the progress bar is filled fillet * /
}
INPUT [type = Range] :: slider {-Thumb--webkit
    -webkit-Appearance: none;
}    


3.2 to a slide rail (track) to style
started a custom pattern. The first is a custom track slider control, the code is very simple, directly attached to it.

INPUT [type = Range] :: - Slider WebKit-Track-Runnable {-
    height: 15px;
    border-RADIUS: 10px; / * set the track radiused * /
    Box-Shadow: 0 1px 1px # def3f8, the inset from 0 .125em .125em # 0d1112; / * track built shadow effects * /
}


when the original control to get the focus, the border controls will show the whole package, so also need to cancel the border.

INPUT [type = Range]: Focus {
    Outline: none;
}


3.3 to slider (Thumb) to style
the following changes to the style of the slider, css code is not very complex, as follows:

INPUT [type = Range] :: - slider-Thumb-WebKit {
    -webkit-Appearance: none;
    height: 25px;
    width: 25px;
    margin-Top: -5px; / * * equal beyond the slider / rail portion offset
    background: #ffffff ;
    border-RADIUS: 50%; / * set circular appearance * /
    border: Solid 0.125em RGBA (205, 224, 230, 0.5); / * set the border * /
    box-shadow: 0 .125em .125em # 3b4547; / * Add shadow underneath * /
}

3.4 based on the location of the slider fill the progress bar
to create a new file RangeSlider.js achieve set slide control properties, listen for events, and set Callback. When the monitor input events on the progress bar to fill, let's take a direct look at the code is how to achieve.

.fn.RangeSlider function = $ (cfg) {
    this.sliderCfg = {
        min:!? cfg && isNaN (parseFloat (cfg.min)) Number The (cfg.min): null,
        max:! cfg && isNaN (parseFloat (cfg ? .max)) Number The (cfg.max): null,
        ? STEP: Number The CFG && (cfg.step) cfg.step:. 1,
        the callback: CFG && cfg.callback cfg.callback: null?
    };
 
    var = $ INPUT $ (the this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var STEP = this.sliderCfg.step;
    var = this.sliderCfg.callback the callback;
 
    input.attr $ ( 'min', min)
        .attr ( 'max', max)
        .attr ( 'STEP', STEP);
 
    $ input.bind ( "INPUT", function (E) {
        $ input.attr ( ' value ', this.value);
        $ input.css (' background ',' Linear-gradient (to right, # 059CFA, White 'this.value + +'%, White) ');
 
        IF ($ .isFunction (the callback )) {
            the callback (the this);
        }
    });
};

set by the slider control objects cfg min, max, step property.
To bind a control input event, when the slider slides will trigger the event, this time to fill the progress bar is complete, I'm using here is a linear gradient linear-gradient (to right, # 059CFA, white '+ this.value + '%, white) in this way, light blue and white colors length from left to right to determine the gradation, the gradation value at this time according to the control. Meanwhile callback function when the event is triggered, the callback function to complete the function can design their own.
Of course, you can also listen to their needs based on other events, such as change event, when the value change will trigger value, very flexible in usage.
How to call this function js file to complete the configuration of it? Very simple, first introduced this js file html file, then directly define script nodes, html code is as follows:

<! DOCTYPE html>
<html>
    <head>
    <title> Demo </ title>
        <script type = "text / JavaScript "the src =" lib / jquery.js "> </ Script>
        <Script type =" text / JavaScript "the src =" the src / RangeSlider.js "> </ Script>
        <Link the rel =" this stylesheet "the href =" CSS / slider.css "type =" text / CSS ">
    </ head>
 
    <body>
        <div ID =" Test ">
            <INPUT type =" Range "value =" 0 ">
        </ div>
 
        <Script>




 
            $('input').RangeSlider({ min: 0,   max: 100,  step: 0.1,  callback: change});
 
        </script>
    </body>
https://blog.csdn.net/weixin_38930535/article/details/79542130