princejwesley / angular-circular-slider Goto Github PK

Hello,

Is it possible to host two sliders on the same page? I tried to create a scope var called $scope.speed and bind it one of the sliders and it will only show the value if I use a scope var called "value".

Plunker
https://plnkr.co/edit/KUGMdN8aevMoj4D1oeVb?p=preview

Thanks,
KC

Hi
Can we add numbers around this 0 to 60, so user can drag from 0 to 45 value

Im executing ajax function to send data to remote server.
Tried using onSlideEnd but its behaviour is not standard, basically onSlideEnd should be invoked when there is actual slide end due to taping and also due to slide drag. But unfortunately onSlideEnd only execute on tap.

Can you help how to implement it to only execute on at end of value change, so that function execute only once per slide or touch.

Hello again,

Another question, is your slider touch-slide-compatible from start, or do I have do do something to get that to work? I have set touch='true', but it doesn't seem to make a difference whether it is set true or false, I still can't touch slide it, only press to move the slider to different locations.

Best regards!
Alex

Hi -

Thank you for making a great control! I'm using this circular slider with Ionic framework and am running into an error as described below. The circular slider has been working and only appeared after placing the circular slider within an Ionic modal, .

Perhaps you can provide some clues as to the root cause problem. Thank you!

The error is as follows:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at TypeError (native) at $$ (http://localhost:3000/lib/angular.lib.js:31909:32) at Object.position (http://localhost:3000/lib/angular.lib.js:31958:15) at redrawShape (http://localhost:3000/lib/angular.lib.js:32662:32) at link (http://localhost:3000/lib/angular.lib.js:32627:7) at http://localhost:3000/lib/ionic.bundle.js:107:33 at Y (http://localhost:3000/lib/ionic.bundle.js:107:89) at S (http://localhost:3000/lib/ionic.bundle.js:96:52) at g (http://localhost:3000/lib/ionic.bundle.js:88:384) at g (http://localhost:3000/lib/ionic.bundle.js:88:407) <circular-slider class="amount-slider acs-slider" shape="Circle" on-slide="c.onSlide" on-slide-end="c.onSlideEnd" radius="125" handle-dist-ratio="0.865" indicator-ball-ratio="0.28" min="c.min" max="c.max" value="c.amount">

Here are the relevant calls in the stack:

In redrawShape:

`function redrawShape() {
var component = buildComponents();
var radius = getRadius();
shapes[scope.shape].drawShape(component, radius);
drawIndicatorBall(component, radius);

    var $$acs = $$(component.acs);
    var $$acsIndicator = $$(component.acsIndicator);
    cs.acsPosition = **$$acs.position()**;`

In Object.position:

When offsetParent() is called the dom object is populated but the offsetParent = null.

function position() { var p = $$(**offsetParent()**);

In $$:

function $$(elem) { // only one element var dom = elem[0]; var computedStyle = **window.getComputedStyle(dom, null);**

In window.getComputedStyle() 'dom' is undefined.

My dom is as follows:

<div class="modal-backdrop active"><div class="modal-backdrop-bg"></div><div class="modal-wrapper" ng-transclude=""><ion-modal-view class="applet-modal modal animated zoomIn ng-enter active ng-enter-active"><!-- ngInclude: 'applets/paymentcs/views/index.html' --><div ng-include="'applets/paymentcs/views/index.html'"><div ng-controller="paymentCSController as c">
  <div class="applet-container" ng-style="{'background': c.applet.view.background}" style="background: rgb(247, 247, 247);">
      <ion-nav-bar class="bar bar-header bar-stable side='right' nav-bar-container" nav-bar-transition="ios">
            <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
      <div class="nav-bar-block" nav-bar="cached"><ion-header-bar class="bar bar-header bar-stable side='right'" align-title="center"><div class="title title-center header-item"></div><div class="buttons buttons-right header-item"><span class="right-buttons">
            <a class="button button-icon icon ion-close" ng-click="applet.close()"></a>
            </span></div></ion-header-bar></div><div class="nav-bar-block" nav-bar="active"><ion-header-bar class="bar bar-header bar-stable side='right'" align-title="center"><div class="title title-center header-item" style="left: 61px; right: 61px;"></div><div class="buttons buttons-right header-item"><span class="right-buttons">
            <a class="button button-icon icon ion-close" ng-click="applet.close()"></a>
            </span></div></ion-header-bar></div></ion-nav-bar>
      <div class="applet-content">
            <div style="position: absolute; float: right; right: 50%;" ng-click="c.setCurrency()">
                <div style="position: relative; float: right; right: -50%; top: 120px; z-index: 2; font-size: 32px; color: rgb(44, 62, 80);" ng-style="{'color': c.applet.view.csValueColor}" class="ng-binding">
                  25
                </div>
            </div>
            <div style="position: absolute; float: right; right: 50%;" ng-click="c.setCurrency()">
                <div style="position: relative; float: right; right: -50%; top: 160px; z-index: 2; font-size: 16px; color: rgb(44, 62, 80);" ng-style="{'color': c.applet.view.csValueColor}" class="ng-binding">
                  USD
                </div>
            </div>
            <div class="text-center" style="position: absolute; width: 100%; top: 20px">
                <style type="text/css" class="ng-binding">
                    .amount-slider .acs {
                      background: rgba(0,0,0,0);
                      border: 35px solid rgba(214, 214, 214, 0.5) !important;
                    }
                    .amount-slider .acs-value {
                      background: rgba(0,0,0,0);
                      border: 1px solid rgba(0,0,0,0);
                    }
                    .amount-slider .acs-indicator {
                      background: #909090;
                      border: none;
                    }
              </style>
                <circular-slider class="amount-slider acs-slider" shape="Circle" on-slide="c.onSlide" on-slide-end="c.onSlideEnd" radius="125" handle-dist-ratio="0.865" indicator-ball-ratio="0.28" min="c.min" max="c.max" value="c.amount">      <div class="acs-panel" style="border-width: 1px; border-radius: 251px;">        <div class="acs" style="width: 250px; height: 250px; border-radius: 250px; border-width: 1px;">          <div class="acs-value" ng-transclude="" style="width: 125px; height: 125px; font-size: 31.25px; top: 62.5px; left: 62.5px;">
                </div>        </div>        <div class="acs-indicator" style="width: 35px; height: 35px;">        </div>      </div>    </circular-slider>
            <div class="text-center m20t">
              <button class="button outline round tiny" ng-click="c.pay()" ng-style="{'background': c.applet.view.payButtonBackground, 'border': c.applet.view.payButtonBorder, 'color': c.applet.view.payButtonColor}" style="border: 1px solid rgb(165, 178, 191); color: rgb(133, 151, 167); background: none;">
                <span translate=""><span class="ng-binding">Donate now</span></span>
              </button>
            </div>
            </div>
        </div>
    </div>
</div></div></ion-modal-view></div></div>

Attempting to integrate this into my page.ts file but getting:
Typescript Error
Unexpected token. A constructor, method, accessor, or property was expected.

Here is my code:`
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@component({
selector: 'page-control_panel',
templateUrl: 'control_panel.html'
})
export class ControlPanel {
constructor(public navCtrl: NavController, public navParams: NavParams) {

}
var app = angular.module('myApp',['angular.circular-slider']);

app = angular.module('main_slider', ['angular.circular-slider']);
app.controller('main_slider', function ($scope) {
$scope.min = 10;
$scope.max = 100;
$scope.shape='Circle';
$scope.value = 20;
$scope.onSlide = function onSlide (value) {
console.log('on slide ' + value);
}

$scope.onSlideEnd = function onSlideEnd(value) {
console.log('on slide end ' + value);
}
})
}
`

Setting a range of min = -100 to max=100 results in a slider that is from -100 to +200 .

Try setting a negative value on the min here to reproduce:
http://codepen.io/ajp8164/pen/XXBQaj

When viewing your component in IE 10 the indicator jumps to the min value on slide.

This can be seen with your demo and

if you dont have ie 10
( you can use the most recent ie and change the rendering to ie 10)

also happens in ie 9 but who cares

It appears initializing to zero is not possible when using a negative to positive range. It just defaults to the minimum.

Native sliders let you set a step increment for adjusting values by 0.1 for example. Is it possible with your plugin?

Hi,

I'm new to angular, and I'm using your slider for a university project. I would like to disable the slider when a button is pressed. I've tried using ng-disabled, but could not get it to work. Do you know if there's another way for your slider, or is that a feature which is not implemented?

Regards,
Alex

When the slider is used within a directive with custom element, for example the https://github.com/LukaszWatroba/v-tabs, the following error is thrown:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

The corresponding code is:

<v-tabs>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
</v-tabs>

<v-pages>
  <v-page>
     <circular-slider ... />
  </v-page>
  <v-page>
       ...
  </v-page>
</v-pages>

A temporary solution is to use divs as fallback:

<v-tabs>
  <v-tab>Tab 1</v-tab>
  <v-tab>Tab 2</v-tab>
</v-tabs>

<div v-pages>
  <div v-page>
     <circular-slider ... />
  </div>
  <div v-page>
       ...
  </div>
</div>

This does work as expected.

error reads
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Could you please tag the latest version with a 1.0.1 tag and update the bower package? Thanks!

Two pointer indicator is required, in order to slide start and end.

Imagine if you have a price range, and u wanna select between 2,000 and 10,000

Hi and thank you for your great job!

The slider is totally flat when used with ionic.

In IE, angular circle slider does not work. The issue is that you are checking properties with "number.isFinite" and this function is not supported in IE. Thanks, Microsoft.