#MobileFriendly #Mobile websites #mobile users #nowyouknow #mobilemarketingdiva

#MobileFriendly #Mobile websites #mobile users #nowyouknow #mobilemarketingdiva

  • minLimit – Number (defaults to null): The minimum value authorized on the slider.
  • showSelectionBarEnd – Boolean (defaults to false): Set to true to always show the selection bar after the slider – Number (defaults to null): Set a number to draw the selection bar between this value and the slider handle.
  • showTicks – Boolean or Number (defaults to false): Set to true to display a tick for each step of the slider.
  • showTicksValues – Boolean or Number (defaults to false): Set to true to display a tick and the step value for each step of the slider.
  • enforceStep – Boolean (defaults to true): Set to true to force the value to be rounded to the step, even when modified from the outside… When set to false, if the model values are modified from outside the slider, they are not rounded and can be between two steps.

AngularJS slider directive with no external dependencies. Mobile friendly!.

@SaundraJackson: #MobileFriendly #Mobile websites #mobile users #nowyouknow #mobilemarketingdiva

AngularJS 1.X slider directive with no external dependencies

Status:

Links:

Slider directive implementation for AngularJS 1.X, without any dependencies: http://angular-slider.github.io/angularjs-slider.

Horizontal

Vertical

Custom style

Reporting issues

Make sure the report is accompanied by a reproducible demo. The ideal demo is created by forking our standard jsFiddle, adding your own code and stripping it down to an absolute minimum needed to demonstrate the bug.

Common issues

My slider is not rendered correctly on load

If the slider’s parent element is not visible during slider initialization, the slider can’t know when its parent becomes visible. For instance, when displaying a slider inside an element which visibility is toggled using ng-show, you need to send an event to force it to redraw when you set your ng-show to true.

method that you should call whenever the slider becomes visible.

as suggested by @maknapp in this issue.

ng-show-example: http://jsfiddle.net/3jjye1cL/

UI-Boostrap tabs example: http://jsfiddle.net/0f7sd7dw/

Decimal value can’t be typed in an input field linked to the slider

will directly be truncated since the value is rounded.

option. Thus, the value can be modified externally without taking care of the step. See #298.

or

or

by the version you want to use):

If you don’t want to bother with an object set in your javascript file, you can pass an anonymous object literal to the slider options:

rz-slider-model

rz-slider-high

rz-slider-tpl-url

The following variables are available in the template as scope variables.

class on the elements you’re customizing.

See the Custom template to use angular directive for label for an example.

rz-slider-options

The default options are:

floor – Number (defaults to 0): Minimum value for a slider.

value): Maximum value for a slider.

step – Number (defaults to 1): Step between each value.

is used internally for this.

minLimit – Number (defaults to null): The minimum value authorized on the slider.

maxLimit – Number (defaults to null): The maximum value authorized on the slider.

minRange – Number (defaults to null): The minimum range authorized on the slider. Applies to range slider only.

maxRange – Number (defaults to null): The maximum range authorized on the slider. Applies to range slider only.

option. Applies to range slider only.

is a string that can take the following values:

For example if you want to display dollar amounts instead of just numbers:

option.

function as a second argument.

can also be an array of objects or Dates like:

. (This was the default behavior prior to 4.0).

draggableRange – Boolean (defaults to false): When set to true and using a range slider, the range can be dragged by the selection bar. Applies to range slider only.

draggableRangeOnly – Boolean (defaults to false): Same as draggableRange but the slider range can’t be changed. Applies to range slider only.

showSelectionBar – Boolean (defaults to false): Set to true to always show the selection bar before the slider handle.

showSelectionBarEnd – Boolean (defaults to false): Set to true to always show the selection bar after the slider handle.

showSelectionBarFromValue – Number (defaults to null): Set a number to draw the selection bar between this value and the slider handle.

), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.

getTickColor – Function(value) (defaults to null): Function that returns the color of a tick. showTicks must be enabled.

values.

hidePointerLabels – Boolean (defaults to false): Set to true to hide pointer labels

hideLimitLabels – Boolean (defaults to false): Set to true to hide min / max labels

autoHideLimitLabels – Boolean (defaults to true): Set to false to disable the auto-hiding behavior of the limit labels.

readOnly – Boolean (defaults to false): Set to true to make the slider read-only.

disabled – Boolean (defaults to false): Set to true to disable the slider.

is the number of milliseconds to wait between two updates of the slider.

showTicks – Boolean or Number (defaults to false): Set to true to display a tick for each step of the slider. Set a number to display ticks at intermediate positions. This number corresponds to the step between each tick.

showTicksValues – Boolean or Number (defaults to false): Set to true to display a tick and the step value for each step of the slider. Set a number to display ticks and the step value at intermediate positions. This number corresponds to the step between each tick.

ticksArray – Array (defaults to null): Use to display ticks at specific positions. The array contains the index of the ticks that should be displayed. For example, [0, 1, 5] will display a tick for the first, second and sixth values.

ticksTooltip – Function(value) (defaults to null): (requires angular-ui bootstrap) Used to display a tooltip when a tick is hovered. Set to a function that returns the tooltip content for a given value.

but for ticks values.

value to 2 so that the slider is rendered properly and the events are handled correctly.

enforceStep – Boolean (defaults to true): Set to true to force the value to be rounded to the step, even when modified from the outside… When set to false, if the model values are modified from outside the slider, they are not rounded and can be between two steps.

to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.

noSwitching – Boolean (defaults to false): Set to true to prevent to user from switching the min and max handles. Applies to range slider only.

onlyBindHandles – Boolean (defaults to false): Set to true to only bind events on slider handles.

boundPointerLabels – Boolean (defaults to true): Set to true to keep the slider labels inside the slider bounds.

, else “50”.

is either ‘min’ or ‘max’ depending on which handle is used.

is either ‘min’ or ‘max’ depending on which handle is used.

is either ‘min’ or ‘max’ depending on which handle is used.

rightToLeft – Boolean (defaults to false): Set to true to show graphs right to left. If vertical is true it will be from top to bottom and left / right arrow functions reversed.

vertical – Boolean (defaults to false): Set to true to display the slider vertically. The slider will take the full height of its parent. Changing this value at runtime is not currently supported.

keyboardSupport – Boolean (defaults to true): Handles are focusable (on click or with tab) and can be modified using the following keyboard controls:

logScale – Boolean (defaults to false): Set to true to use a logarithmic scale to display the slider.

For custom scales:

customValueToPosition – Function(val, minVal, maxVal): percent: Function that returns the position on the slider for a given value. The position must be a percentage between 0 and 1.

customPositionToValue – Function(percent, minVal, maxVal): value: Function that returns the value for a given position on the slider. The position is a percentage between 0 and 1.

properties which are colors.

attribute.

attribute.

method:

To force slider to recalculate dimensions, broadcast reCalcViewDimensions event from parent scope. This is useful for example when you use slider inside a widget where the content is hidden at start – see the “Sliders into modal” example on the demo site.

You can also force redraw with rzSliderForceRender event.

event.

I use Slider on couple of my projects and it’s being tested on desktop versions of Chrome, Firefox, Safari, IE 9/10 (Ticks are displayed using flex display so they don’t work on IE9). Slider is also tested on Android and iPhone using all browsers available on those platforms.

This project is based on https://github.com/prajwalkman/angular-slider. It has been rewritten from scratch in JavaScript (the original source was written in CoffeeScript).

Licensed under the MIT license

angularjs-slider-zsk

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.