angularjs-slider

<!DOCTYPE html> <html ng-app="rzSliderDemo"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AngularJS Touch Slider</title>  <link rel="stylesheet" href="./lib/bootstrap.min.css"> <link rel="stylesheet" href="../dist/rzslider.css"/> <link rel="stylesheet" href="demo.css"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> </head> <body ng-controller="MainCtrl"> <div class="wrapper"> <header> <h1>AngularJS Touch Slider</h1> </header> <article> <h2>Simple slider</h2> Model: <input type="number" ng-model="minSlider.value"/><br/> <rzslider rz-slider-model="minSlider.value"></rzslider> </article> <article> <h2>Range slider</h2> Min Value: <input type="number" ng-model="rangeSlider.minValue"/><br/> Max Value: <input type="number" ng-model="rangeSlider.maxValue"/><br/> <rzslider data-rz-slider-model="rangeSlider.minValue" data-rz-slider-high="rangeSlider.maxValue" data-rz-slider-options="rangeSlider.options" ></rzslider> </article> <article> <h2>Slider with custom style</h2> <rzslider class="custom-slider" data-rz-slider-model="customSlider.minValue" data-rz-slider-high="customSlider.maxValue" data-rz-slider-options="customSlider.options" ></rzslider> </article> <article> <h2>Range slider with min limit set to 10 and max limit set to 90 </h2> <rzslider rz-slider-model="minMaxLimitSlider.value" rz-slider-options="minMaxLimitSlider.options" ></rzslider> </article> <article> <h2>Range slider with restricted area from 30 to 70</h2> <rzslider data-rz-slider-model="restrictedRangeSlider.minValue" data-rz-slider-high="restrictedRangeSlider.maxValue" data-rz-slider-options="restrictedRangeSlider.options" ></rzslider> </article> <article> <h2>Range slider with multiple restricted area from 20 to 30, 50 to 60 and 75 to 85 <br /> and the feature that skip restricted ranges with arrow keys </h2> <rzslider rz-slider-model="multipleRestrictedRangeSlider.minValue" rz-slider-high="multipleRestrictedRangeSlider.maxValue" rz-slider-options="multipleRestrictedRangeSlider.options" ></rzslider> </article> <article> <h2>Range slider with minimum range of 10 and maximum of 50</h2> <rzslider rz-slider-model="minMaxRangeSlider.minValue" rz-slider-high="minMaxRangeSlider.maxValue" rz-slider-options="minMaxRangeSlider.options" ></rzslider> </article> <article> <h2>Range slider with noSwitching=true</h2> <rzslider rz-slider-model="noSwitchingSlider.minValue" rz-slider-high="noSwitchingSlider.maxValue" rz-slider-options="noSwitchingSlider.options" ></rzslider> </article> <article> <h2>Range slider with minimum range of 10 and pushRange option</h2> <rzslider rz-slider-model="minPushRangeSlider.minValue" rz-slider-high="minPushRangeSlider.maxValue" rz-slider-options="minPushRangeSlider.options" ></rzslider> </article> <article> <h2>Range slider with coloured bars outside the selected range</h2> <rzslider rz-slider-model="outerBarsRangeSlider.minValue" rz-slider-high="outerBarsRangeSlider.maxValue" rz-slider-options="outerBarsRangeSlider.options" ></rzslider> </article> <article> <h2>Slider with visible selection bar</h2> <rzslider rz-slider-model="slider_visible_bar.value" rz-slider-options="slider_visible_bar.options" ></rzslider> </article> <article> <h2>Slider with visible selection bar at the end</h2> <rzslider rz-slider-model="slider_visible_bar_end.value" rz-slider-options="slider_visible_bar_end.options" ></rzslider> </article> <article> <h2>Slider with visible selection bar from a value</h2> <rzslider rz-slider-model="slider_visible_bar_from_value.value" rz-slider-options="slider_visible_bar_from_value.options" ></rzslider> </article> <article> <h2>Slider with selection bar gradient</h2> <rzslider rz-slider-model="gradient_slider_bar.minValue" rz-slider-high="gradient_slider_bar.maxValue" rz-slider-options="gradient_slider_bar.options" ></rzslider> </article> <article> <h2>Slider with dynamic selection bar colors</h2> <rzslider rz-slider-model="color_slider_bar.value" rz-slider-options="color_slider_bar.options" ></rzslider> </article> <article> <h2>Slider with dynamic pointer color</h2> <rzslider rz-slider-model="color_slider_pointer.value" rz-slider-options="color_slider_pointer.options" ></rzslider> </article> <article> <h2>Slider with custom floor/ceil/step</h2> <rzslider rz-slider-model="slider_floor_ceil.value" rz-slider-options="slider_floor_ceil.options" ></rzslider> </article> <article> <h2>Slider with logarithmic scale</h2> <rzslider rz-slider-model="slider_log.value" rz-slider-options="slider_log.options" ></rzslider> </article> <article> <h2>Slider with custom scale</h2> <rzslider rz-slider-model="slider_custom_scale.value" rz-slider-options="slider_custom_scale.options" ></rzslider> </article> <article> <h2>Right to left slider with custom floor/ceil/step</h2> <rzslider rz-slider-model="slider_floor_ceil_rtl.value" rz-slider-options="slider_floor_ceil_rtl.options" ></rzslider> </article> <article> <h2>Slider with callbacks on start, change and end</h2> <p>Value linked on start: {{ otherData.start }}</p> <p>Value linked on change: {{ otherData.change }}</p> <p>Value linked on end: {{ otherData.end }}</p> <rzslider rz-slider-model="slider_callbacks.value" rz-slider-options="slider_callbacks.options" ></rzslider> </article> <article> <h2>Slider with custom display function</h2> <rzslider rz-slider-model="slider_translate.minValue" rz-slider-high="slider_translate.maxValue" rz-slider-options="slider_translate.options" ></rzslider> </article> <article> <h2>Slider with custom display function using html formatting</h2> <rzslider rz-slider-model="slider_translate_html.minValue" rz-slider-high="slider_translate_html.maxValue" rz-slider-options="slider_translate_html.options" ></rzslider> </article> <article> <h2>Slider with Alphabet</h2> Current letter: {{ slider_alphabet.value }} <rzslider rz-slider-model="slider_alphabet.value" rz-slider-options="slider_alphabet.options" ></rzslider> </article> <article> <h2>Slider with ticks</h2> <rzslider rz-slider-model="slider_ticks.value" rz-slider-options="slider_ticks.options" ></rzslider> </article> <article> <h2>Slider with ticks at specific positions</h2> <rzslider rz-slider-model="slider_ticks_array.value" rz-slider-options="slider_ticks_array.options" ></rzslider> </article> <article> <h2>Slider with ticks and tooltips</h2> <rzslider rz-slider-model="slider_ticks_tooltip.value" rz-slider-options="slider_ticks_tooltip.options" ></rzslider> </article> <article> <h2>Slider with ticks and values (and tooltips)</h2> <rzslider rz-slider-model="slider_ticks_values.value" rz-slider-options="slider_ticks_values.options" ></rzslider> </article> <article> <h2>Range slider with ticks and values</h2> <rzslider rz-slider-model="range_slider_ticks_values.minValue" rz-slider-high="range_slider_ticks_values.maxValue" rz-slider-options="range_slider_ticks_values.options" ></rzslider> </article> <article> <h2>Slider with ticks at intermediate positions</h2> <rzslider rz-slider-model="slider_ticks_at.value" rz-slider-options="slider_ticks_at.options" ></rzslider> </article> <article> <h2>Slider with ticks and values at intermediate positions</h2> <rzslider rz-slider-model="slider_ticks_values_at.value" rz-slider-options="slider_ticks_values_at.options" ></rzslider> <br><br> </article> <article> <h2>Slider with ticks values and legend</h2> <rzslider class="with-legend" rz-slider-model="slider_ticks_legend.value" rz-slider-options="slider_ticks_legend.options" ></rzslider> </article> <article> <h2>Slider with dynamic tick color</h2> <rzslider rz-slider-model="slider_tick_color.value" rz-slider-options="slider_tick_color.options" ></rzslider> </article> <article> <h2>Slider with date values</h2> <rzslider rz-slider-model="slider_dates.value" rz-slider-options="slider_dates.options" ></rzslider> </article> <article> <h2>Slider with draggable range</h2> <rzslider rz-slider-model="slider_draggable_range.minValue" rz-slider-high="slider_draggable_range.maxValue" rz-slider-options="slider_draggable_range.options" ></rzslider> </article> <article> <h2>Slider with draggable range only</h2> <rzslider rz-slider-model="slider_draggable_range_only.minValue" rz-slider-high="slider_draggable_range_only.maxValue" rz-slider-options="slider_draggable_range_only.options" ></rzslider> </article> <article> <h2>Vertical sliders</h2> <div class="row vertical-sliders" style="margin: 20px;"> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider> </div> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue" rz-slider-options="verticalSlider2.options"></rzslider> </div> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider> </div> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue" rz-slider-options="verticalSlider4.options"></rzslider> </div> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider> </div> <div class="col-md-2"> <rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider> </div> </div> </article> <article> <h2>Disabled slider</h2> <label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label> <rzslider rz-slider-model="disabled_slider.minValue" rz-slider-high="disabled_slider.maxValue" rz-slider-options="disabled_slider.options" ></rzslider> </article> <article> <h2>Read-only slider</h2> <label>Read-only <input type="checkbox" ng-model="read_only_slider.options.readOnly"></label> <rzslider rz-slider-model="read_only_slider.value" rz-slider-options="read_only_slider.options" ></rzslider> </article> <article> <h2>Toggle slider example</h2> <button ng-click="toggle()">{{ visible ? 'Hide' : 'Show' }}</button> <br/> <div ng-show="visible"> <rzslider rz-slider-model="slider_toggle.value" rz-slider-options="slider_toggle.options"></rzslider> </div> </article> <article> <h2>Sliders inside a modal</h2> Normal slider value: {{percentages.normal.low}}% </br> Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}% </br> <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button> </article> <article> <h2>Sliders inside tabs</h2> <p>Price 1: {{tabSliders.slider1.value}}</p> <p>Price 2: {{tabSliders.slider2.value}}</p> <uib-tabset> <uib-tab heading="Slider 1" select="refreshSlider()"> <rzslider rz-slider-model="tabSliders.slider1.value"></rzslider> </uib-tab> <uib-tab heading="Slider 2" select="refreshSlider()"> <rzslider rz-slider-model="tabSliders.slider2.value"></rzslider> </uib-tab> </uib-tabset> </article> <article> <h2>Slider with angular directive inside custom template</h2> <rzslider rz-slider-model="slider_custom_directive_inside_template.minValue" rz-slider-high="slider_custom_directive_inside_template.maxValue" rz-slider-options="slider_custom_directive_inside_template.options" rz-slider-tpl-url="directiveInCustomTemplate.html" ></rzslider> </article> <article> <h2>Slider with all options demo</h2> <div class="row all-options"> <div class="col-md-4"> <label class="field-title">Min Value: </label><input type="number" ng-model="slider_all_options.minValue"/><br/> <label class="field-title"><input type="checkbox" ng-click="toggleHighValue()"> Max Value: </label> <input type="number" ng-model="slider_all_options.maxValue" ng-disabled="slider_all_options.maxValue == null"/><br/> <label class="field-title">Floor: </label><input type="number" ng-model="slider_all_options.options.floor"/><br/> <label class="field-title">Ceil: </label><input type="number" ng-model="slider_all_options.options.ceil"/><br/> </div> <div class="col-md-4"> <label class="field-title">Step: </label><input type="number" ng-model="slider_all_options.options.step"/><br/> <label class="field-title">Precision: </label><input type="number" ng-model="slider_all_options.options.precision"/><br/> <label>Hide limits <input type="checkbox" ng-model="slider_all_options.options.hideLimitLabels"></label><br/> <label>Draggable range <input type="checkbox" ng-model="slider_all_options.options.draggableRange"></label> </div> <div class="col-md-4"> <label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/> <label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/> <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/> <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br /> <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label><br /> <label>Reversed Controls <input type="checkbox" ng-model="slider_all_options.options.reversedControls"></label><br /> <label>Vertical <input type="checkbox" ng-model="slider_all_options.options.vertical"></label> </div> </div> <rzslider rz-slider-model="slider_all_options.minValue" rz-slider-high="slider_all_options.maxValue" rz-slider-options="slider_all_options.options" ></rzslider> </article> </div> </body> <script src="../node_modules/angular/angular.js"></script> <script src="./lib/ui-bootstrap-tpls.js"></script> <script src="../dist/rzslider.js"></script> <script src="demo.js"></script> </html>