Price: {{price}}

Healthplan: Super Optum Plus II

AngularUI Slider demo

1. Step slider with event listeners (see console log)
2. Slider - vertical, step value 5
3. Slider - start value 14
4. Dual sliders - start value 14
5. Slider - default min and max
6. Slider - range max (instead of min)
7. Slider - range values, step with decimals
8. Slider - start value 0.34, step with decimals (try increase/decrease with arrow keys)
9. Slider - start value [-0.52, 0.54], step with decimals from min -1.00 to max 1.00 (try increase/decrease with arrow keys)
10. Slider - start value -0.37, step with decimals from min -1.00 to max 1.00
11. Simple Colorpicker

    Red:

    Green:

    Blue:
12. Step slider with event listeners(see console log)

    This slider has event listeners attached to it, assigned by defining the listeners in the option passed to the slider. For example in controller:

    $scope.slider = {
    	'options': {
    		start: function (event, ui) { $log.info('Slider start'); },
        	stop: function (event, ui) { $log.info('Slider stop'); }
    

    And in markup

    <div ui-slider="slider.options" 
         min="0" 
         max="50" 
         ng-model="demoVals.sliderExample1"></div>
    		

    Options may also be set in in service uiSliderConfig, ie:

    app.factory('uiSliderConfig', function ($log) {
    	return {
    		start: function (event, ui) { $log.info('Slider start'); },
    		stop: function (event, ui) { $log.info('Slider stop'); }
    	};
    });