Skip to content

I
i20rzslider
Commit 169967a5 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Update demo site to 5.6

parent 5a82d8a3
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 80 deletions
demo.js
View file @ 169967a5
......@@ -253,30 +253,6 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with custom template in order to use HTML formatting for ticks
$scope.slider_custom_template = {
value: 100,
options: {
floor: 0,
ceil: 500,
step: 100,
showTicksValues: true,
translate: function (value) {
return '<b>Price:</b> $' + value;
}
}
};
//Slider config with angular directive inside custom template
$scope.slider_custom_directive_inside_template = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100
}
};
//Slider config with steps array of letters
$scope.slider_alphabet = {
value: 'E',
......@@ -305,6 +281,16 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with ticksArray
$scope.slider_ticks_array = {
value: 75,
options: {
floor: 0,
ceil: 100,
ticksArray: [0, 10, 25, 50, 100]
}
};
//Slider with ticks values and legend
$scope.slider_ticks_legend = {
value: 5,
......@@ -372,6 +358,30 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with custom template in order to use HTML formatting for ticks
$scope.slider_custom_template = {
value: 100,
options: {
floor: 0,
ceil: 500,
step: 100,
showTicksValues: true,
translate: function(value) {
return '<b>Price:</b> $' + value;
}
}
};
//Slider config with angular directive inside custom template
$scope.slider_custom_directive_inside_template = {
minValue: 20,
maxValue: 80,
options: {
floor: 0,
ceil: 100
}
};
//Slider with draggable range
$scope.slider_draggable_range = {
minValue: 1,
......
index.html
View file @ 169967a5
......@@ -145,15 +145,6 @@
<show-code js-file="color_slider_pointer" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with dynamic tick color</h2>
<rzslider
rz-slider-model="color_slider_tick.value"
rz-slider-options="color_slider_tick.options"
></rzslider>
<show-code js-file="color_slider_tick" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with custom floor/ceil/step</h2>
<rzslider
......@@ -214,48 +205,6 @@
<show-code js-file="slider_translate_html" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with custom template to use HTML formatting for ticks</h2>
<rzslider
rz-slider-model="slider_custom_template.value"
rz-slider-options="slider_custom_template.options"
rz-slider-tpl-url="custom-template.html"
></rzslider>
<i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/>
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="your-custom-template.html">
<div hljs hljs-include="'custom-template.html'" hljs-language="html"></div>
</tab>
</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="directive-in-custom-template.html"
></rzslider>
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="directive-in-custom-template.html">
<div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div>
</tab>
</tabset>
</article>
<article>
<h2>Slider with Alphabet</h2>
Current letter: {{ slider_alphabet.value }}
......@@ -275,7 +224,6 @@
<show-code js-file="slider_ticks" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with ticks at intermediate positions</h2>
<rzslider
......@@ -285,6 +233,15 @@
<show-code js-file="slider_ticks_intermediate" html-file="singleSlider"></show-code>
</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>
<show-code js-file="slider_ticks_array" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with ticks values and legend</h2>
<rzslider class="with-legend"
......@@ -334,6 +291,57 @@
<show-code js-file="range_slider_ticks_values_intermediate" html-file="rangeSlider"></show-code>
</article>
<article>
<h2>Slider with dynamic tick color</h2>
<rzslider
rz-slider-model="color_slider_tick.value"
rz-slider-options="color_slider_tick.options"
></rzslider>
<show-code js-file="color_slider_tick" html-file="singleSlider"></show-code>
</article>
<article>
<h2>Slider with custom template to use HTML formatting for ticks</h2>
<rzslider
rz-slider-model="slider_custom_template.value"
rz-slider-options="slider_custom_template.options"
rz-slider-tpl-url="custom-template.html"
></rzslider>
<i>* You need to include ngSanitize (angular-sanitize.js) in order to use <a href="https://docs.angularjs.org/api/ng/directive/ngBindHtml" target="_blank">ng-bind-html</a></i><br/>
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/customTemplateSlider.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/slider_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="your-custom-template.html">
<div hljs hljs-include="'custom-template.html'" hljs-language="html"></div>
</tab>
</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="directive-in-custom-template.html"
></rzslider>
<tabset class="code">
<tab heading="HTML">
<div hljs hljs-include="'snippets/directive_in_custom_template.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/directive_in_custom_template.js'" hljs-language="js"></div>
</tab>
<tab heading="directive-in-custom-template.html">
<div hljs hljs-include="'directive-in-custom-template.html'" hljs-language="html"></div>
</tab>
</tabset>
</article>
<article>
<h2>Slider with draggable range</h2>
<rzslider
......
show-code.html
View file @ 169967a5
<tabset class="code">
<tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab>
<tab heading="HTML">
<div hljs hljs-include="'snippets/'+ htmlFile + '.html'" hljs-language="html"></div>
</tab>
<tab heading="JS">
<div hljs hljs-include="'snippets/'+ jsFile + '.js'" hljs-language="js"></div>
</tab>
</tabset>
\ No newline at end of file
</tabset>
snippets/slider_ticks_array.js 0 → 100644
View file @ 169967a5
$scope.slider = {
value: 55,
options: {
floor: 0,
ceil: 100,
ticksArray: [0, 10, 25, 50, 100]
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment