seiyria / Angular Bootstrap Slider
Licence: mit
an angularjs directive for seiyria-bootstrap-slider
Stars: ✭ 183
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Angular Bootstrap Slider
Bootstrap Slider
A slider control for Bootstrap 3 & 4.
Stars: ✭ 2,981 (+1528.96%)
Mutual labels: slider, bootstrap
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+1018.03%)
Mutual labels: slider, bootstrap
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-4.92%)
Mutual labels: bootstrap
Stellar
Stellar is completely based on the latest version of Bootstrap 4. Stellar Admin is designed to reflect the simplicity and svelte of the components and UI elements and coded to perfection with well-organized code.
Stars: ✭ 176 (-3.83%)
Mutual labels: bootstrap
Algorithm Visualizer
View Algorithms in the Browser! - Built with ReactJs
Stars: ✭ 180 (-1.64%)
Mutual labels: bootstrap
Ruby2 Rails4 Bootstrap Heroku
A starter application based on Ruby 2.4, Rails 4.2 and Bootstrap for Sass 3, deployable on Heroku
Stars: ✭ 181 (-1.09%)
Mutual labels: bootstrap
Laravel Bootstrap 4 Forms
Bootstrap 4 forms for Laravel 5/6/7/8
Stars: ✭ 181 (-1.09%)
Mutual labels: bootstrap
Hgcircularslider
A custom reusable circular / progress slider control for iOS application.
Stars: ✭ 2,240 (+1124.04%)
Mutual labels: slider
Cognito Vue Bootstrap
This application illustrates how to use the Amazon Amplify with vue.js.
Stars: ✭ 180 (-1.64%)
Mutual labels: bootstrap
Zero To Mastery Website
A website to track the status of the OpenSource Projects that our groups will be working on, with links to the github profiles of the contributors.
Stars: ✭ 175 (-4.37%)
Mutual labels: bootstrap
Reactsimpleflexgrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 181 (-1.09%)
Mutual labels: bootstrap
Image Bootstrap
⛅️ Creates (chroots and) bootable virtual machine images; command line tool (Python 3)
Stars: ✭ 178 (-2.73%)
Mutual labels: bootstrap
Parameters
📊 Computation and processing of models' parameters
Stars: ✭ 181 (-1.09%)
Mutual labels: bootstrap
Bootstrap Input Spinner
A Bootstrap 4 / jQuery plugin to create input spinner elements for number input
Stars: ✭ 176 (-3.83%)
Mutual labels: bootstrap
Flutter Circular Slider
A customizable circular slider for Flutter.
Stars: ✭ 183 (+0%)
Mutual labels: slider
angular-bootstrap-slider
This plugin was mostly put together quickly with the intent of using something that worked. It has zero test coverage. It is, however, registered on bower as angular-bootstrap-slider
. Just include slider.js
and use the package ui.bootstrap-slider
. You will also need to include bootstrap-sliders CSS and JS.
Available Options
See bootstrap-slider for examples and options.
Sample Usage
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value"></slider>
<!-- ..or an attribute -->
<span slider ng-model="sliders.secondSliderValue" min="minTest"></span>
Troubleshooting
Tooltips
If you Want to hide the tooltip on your slider (or define a value for the bootstrap-slider data-slider-tooltip
options, such as "show", "hide" or "always"), you should use the tooltip
attribute, like this :
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" tooltip="hide"></slider>
But, if the tooltip
attribute is in conflict with another angular directive, you can use the alternative slider-tooltip
attribute :
<!-- it can be used as an element -->
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" slider-tooltip="hide"></slider>
Event Calbacks
<!-- event callbacks receive the name of the event and the associated value with that event -->
<slider ng-model="sliders.sliderValue" on-stop-slide="myCallback($event,value)"></slider>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].