Angular2 drag event not working

[shdsmth]

I'm trying to implement the roundSlider in an Angular 2 project which is causing me some headache. Please note that I'm a beginner in Angular 2 development.

Configuring and displaying the roundSliders is no problem, but modifying/dragging the value doesn't result in a front-end change.

Here's the current setup in the Angular 2 component:

ngAfterViewChecked() {
jQuery(this._elRef.nativeElement).find('.radial-slider').roundSlider(
{
sliderType: "min-range",
handleShape: "round",
width: "12",
radius: "60",
value: 0,
animation: false,
showTooltip: true,
editableTooltip: false,
readOnly: false,
disabled: false,
keyboardAction: true,
mouseScrollAction: false,
handleSize: "+17",
startAngle: 90,
drag: (event, ui) => {
console.log(event);
}
});

Upon dragging the handle the handle itself doesn't move, but looking in the console log you can see that it does seem to be doing something. Here's an example of the result of the drag event console log:
Object {value: 7, preValue: 0, handle: Object, options: Object, type: "drag"}

What would be the correct way of getting the changed value to actually modify the aria-valuenow and rotate() values so the roundSlider works as expected?

Looking forward to your feedback.

[soundar24]

I can't reproduce this issue in my Angular2 sample, maybe your application scenario was differ. So is there any possibilities to host in your in online and share me the link. Otherwise can you share the related information to make the similar sample in my side.

However just let me know any of the way to reproduce that issue in my machine, so that i can provide a solution to resolve that... Thanks :)

[shdsmth]

Hi soundar, thanks for your quick response.

I have been able to resolve the issue by removing the default value (value: 0,). To get the roundsliders to work I had to place the jQuery call in lifecycle hook ngAfterViewChecked, but this also fired upon any changes made which kept setting the value back to 0.

To prevent this I created an initialized boolean and changed the code as follows.

ngAfterViewChecked() {
if (this.terms != null && !this.initialized) {
this.initialized = true;
console.log('initRadials');
jQuery(this._elRef.nativeElement).find('.radial-slider').roundSlider(
{
sliderType: "min-range",
handleShape: "round",
width: "12",
radius: "60",
// value: 0,
animation: false,
showTooltip: true,
editableTooltip: false,
readOnly: false,
disabled: false,
keyboardAction: true,
mouseScrollAction: false,
handleSize: "+17",
startAngle: 90,
drag: (event, ui) => {
// console.log(event);
}
});
}}

However, now I have an issue with the tooltip, which keeps getting overridden by the changed value. Here's an example: http://g.recordit.co/v33x1ENNUm.gif. Don't mind the position of the tooltip, that still needs work, but upon dragging the slider and releasing the mouse button the slider's value is displayed. Clicking anywhere makes the original tooltip show again. Is there something in the library code that could do this? For the record: I would never like to display the selected value, always the description tooltip.

[soundar24]

From the code snippet and the example image, i can't find how you achieved this. I think you may did any sample level customization. But in the roundSlider itself, it has a property "tooltipFormat" to customize the tooltip format, so you can use that.

Check the below demo and update me your comments:
https://jsfiddle.net/soundar24/deLqk8sr/1/

[shdsmth]

Yeah I know about the tooltipFormat property, but it seems Angular 2 is messing things up in the way it fires jQuery in a different sequence, or something like that. I'll keep messing around with it and let you know if I can work it out.

[XBITSwitzerland]

Hey can you share your code with us?