Cant render the slider

[tonywong625]

Hey there, I have followed the installation and the same HTML markup, however the slider isnt displaying.

    <div class="variant-header">
        Plain slider
    </div>
    <ng2-slider min="1"
                max="14"
                value="5"
                (onRangeChanged)="plainValueChanged($event, plain_1)"
            >
    </ng2-slider>
    <p class="value-box">
        Value: <span class="value-span" #plain_1>5</span>
    </p>

[Bogdan1975]

Hi Sorry for long answer time. About slider - maybe problem in styling. HTML code of slider was rendered?

[djrr94]

Hey, I absolutely can't get this thing to work too. I followed all of the instructions in the readme file, but slider won't render, and HTML markup aren't rendering too. I'm using latest Angular 2 RC4.

I was a bit surprised by not mentioning any directive include in the .ts file, maybe could this be the problem?

I installed this slider and dependencies through NPM.

My .TS file: (from your example)

`export class MyComponent {

plainValueChanged(event, container:any) { var el = this.getElement(container); el.innerText = event.startValue; }

getElement(data){ if (typeof(data)=='string') { return document.getElementById(data); } if (typeof(data)=='object' && data instanceof Element) { return data; } return null; } }`

My HTML template: (from your example too)

`<ng2-slider min="1" max="14" value="5" (onRangeChanged)="plainValueChanged($event, plain_1)">

Value: 5

` I really don't know where the problem is, if you could help, I would be very glad. Thank you.

[Bogdan1975]

Hi Both this function are responsible for changing input box value only. Did you specify

directives: [Ng2SliderComponent, ...]

in @Component decorator ?

What errors do you see in your browser console?

[djrr94]

Hello Bogdan, thanks for your reply!

When I add this to directives, I get this error at console:

Uncaught ReferenceError: Ng2SliderComponent is not defined

After a little research I assumed it should be included in my component like this:

import {Ng2SliderComponent} from 'ng2-slider-component/ng2-slider.component';

When I save it like this, I get this error in console:

Uncaught TypeError: System.register is not a function

At this point I don't know what to try next. Maybe it would be nice if you provide a full install guide in your Readme file, I don't think I'm the only one confused.

Thank you for your help!

[Bogdan1975]

What module system do you use? This components prepared for System.js module system. https://angular.io/docs/ts/latest/quickstart.html Learning of this manual is required for understanding Angular 2 application's ecosystem

[jlberrocal]

Your examples are not clear at all, because you don't specify which is the package that we should import, also i'm trying to make it work but when the "onRangeChanged" is fired i don't know what is the second parameter, i was supposing that it is a value from the plugin side but after continue reading there is lots of those variables (plain_1, plain_2, range-1-start, etc) so i don't know what is supposed that i have to provide as second parameter, also please remove the input field from the widget, it is ok for testing, but not for a real usage

Edit After read the plugin i notice that there is no a second parameter, the plugin is returning himself, why?

i don't need the component, i need the value and things like that

[fryck]

I use Webpack instead of SystemJS (my choice), so i can't use your component... !

[Bogdan1975]

I'm planning prepare it for Webpack, but it will be some later

[Bogdan1975]

Hi, jlberrocal

when the "onRangeChanged" is fired i don't know what is the second parameter

What U mean "second parameter"? "onRangeChanged" is event

also please remove the input field from the widget, it is ok for testing, but not for a real usage

Yes, It will be optional in next version

the plugin is returning himself, why?

To have ability to change values in widget. Maybe callback will be better solution for this. Maybe. I'll think about this.

Thank you for your notes

[alaksandarjesus]

To whoever looking that ng2-slider is not working,

In angular-cli-build.js

module.exports = function(defaults) {
    return new Angular2App(defaults, {
    vendorNpmFiles: [
    'systemjs/dist/system-polyfills.js',
    'systemjs/dist/system.src.js',
    'zone.js/dist//*.+(js|js.map)',
    'es6-shim/es6-shim.js',
    'reflect-metadata//.+(ts|js|js.map)',
    'rxjs//.+(js|js.map)',
    '@angular//*.+(js|js.map)',
    '@angular2-material//',
    'ng2-slideable-directive/*',
    'ng2-styled-directive/*',
    'ng2-slider-component/*'
    ]
    });
};

Then in system-config.js

const map: any = {
   '@angular2-material': 'vendor/@angular2-material',
   'ng2-slideable-directive':'vendor/ng2-slideable-directive',
   'ng2-styled-directive':'vendor/ng2-styled-directive',
   'ng2-slider-component':'vendor/ng2-slider-component'
};

/** User packages configuration. */
const packages: any = {
    'ng2-slideable-directive':{
        main:`*.js`
    },
    'ng2-styled-directive':{
        main:`*.js`
    },
    'ng2-slider-component':{
        main:`*.js`
    }
};

In your componentname.component.js file

import {Ng2SliderComponent} from 'ng2-slider-component/ng2-slider.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [MD_BUTTON_DIRECTIVES, MD_TOOLBAR_DIRECTIVES, Ng2SliderComponent]
})

This works for me.

• Note, I have material components with me. You can omit it.

[Bogdan1975]

Component was recompiled, using Common JS modules. So, now it is compatible with both Webpack and SystemJS.

[Bogdan1975]

I'm publish new version with SystemJS compatible files to npm

*.js files compiled for WebPack

If you use SystemJS, you have to use *.system.js files, they are compiled for SystemJS.

Fragment of SystemJS config:

packages: {

    ....

    'node_modules/ng2-slider-component': {
            main: 'ng2-slider.component.system.js',
            defaultExtension: 'system.js' 
    },

    .... 

}

[Luperco]

Hi. I cannot make it works.

I've installed the component and dependency with npm --save I've imported the component with:

import { Ng2SliderComponent } from 'ng2-slider-component/ng2-slider.component';

And declared in my ngModule:

declarations: [ Ng2SliderComponent ]

When my application loads I get the error in the console:

Uncaught Error: moduleId should be a string in "Ng2SliderComponent"

Thanks.

[chakAs3]

Hi I had the same error as Luperco . did you find out what can be the issue

[vasanthsunder]

Hello I had the same error "Error: moduleId should be a string in "Ng2SliderComponent", Can someone say what might be the issue. Am using WebPack module bundler

[rebase-master]

Hi,

Did you update this package for angular2/webpack? Any news on how long will take to be compatible with webpack?

[Hassan0Rehman]

Hi, same issue as above. I see error "Error: moduleId should be a string in "Ng2SliderComponent". See https://goo.gl/wIDDiL for more information." on console. The error message doesn't make any sense to me. Some solution would be help, i am using webpack.

[prasadkopanati]

For Webpack users, I was able to resolve this issue. I removed the moduleId for the ng2-slider-component component.

Follow these steps: 1) Navigate to node_modules/ng2-slider-component/ng2-slider.component.js 2) In the component definition (~ lines 400-405), remove the moduelId keyword and value (i.e. delete the line moduleId: module.id).

For more info about moduleId refer to this SO post: http://stackoverflow.com/questions/37178192/angular2-what-is-the-meanings-of-module-id-in-component

[Apee]

@prasadkopanati ! perfect this is the only thing that needs to be changed for it to work in webpack.

[shivbonala]

Hi @prasadkopanati I tried by removing the moduleId:module.id line in the ng2-slider-component.js file that issue was gone but strangely i was getting

Error: Template parse errors:↵Can't bind to 'styleBlock' since it isn't a known property of 'div'. ("ontainer ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" bla bla.....

if i add module.id line getting need string in "Ng2SliderComponent". Am using webpack.

[DharmalingamViky]

I facing below error message in console

Uncaught ReferenceError: require is not defined at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :16:14) at eval () at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9) at Object.../../../../script-loader/index.js!../../../../ng2-slider-component/ng2-slider.component.js (ng2-slider.component.js?8f38:1) at webpack_require (bootstrap 2d48123eea5f56b4b91a:54) at Object.2 (scripts.bundle.js:155) at webpack_require (bootstrap 2d48123eea5f56b4b91a:54) at webpackJsonpCallback (bootstrap 2d48123eea5f56b4b91a:25) at scripts.bundle.js:1 (anonymous) @ VM3377:16 webpackJsonp.../../../../script-loader/addScript.js.module.exports @ addScript.js:9 ../../../../script-loader/index.js!../../../../ng2-slider-component/ng2-slider.component.js @ ng2-slider.component.js?8f38:1 webpack_require @ bootstrap 2d48123eea5f56b4b91a:54 2 @ scripts.bundle.js:155 webpack_require @ bootstrap 2d48123eea5f56b4b91a:54 webpackJsonpCallback @ bootstrap 2d48123eea5f56b4b91a:25 (anonymous) @ scripts.bundle.js:1 compiler.es5.js:1690 Uncaught Error: Template parse errors: Can't bind to 'styleBlock' since it isn't a known property of 'div'. ("ontainer ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" styled [ERROR ->][styleBlock] = "['{height: 26px; margin-top: 7px; margin-bottom: 12px}', '.slider-handle {box-sizing:"): ng:///ImgEnhancementModule/Ng2SliderComponent.html@30:5 Can't bind to 'boundElement' since it isn't a known property of 'span'. (" slideAble slideDirection="horisontal" [ERROR ->]boundElement="{{id + '-ribbon'}}" dynamicRightLimit="{{(isRange == true) ? id + '-right-han"): ng:///ImgEnhancementModule/Ng2SliderComponent.html@38:10 Can't bind to 'dynamicRightLimit' since it isn't a known property of 'span'. (" slideDirection="horisontal" boundElement="{{id + '-ribbon'}}" [ERROR ->]dynamicRightLimit="{{(isRange == true) ? id + '-right-handle' : null}}" (onStopSliding)="on"): ng:///ImgEnhancementModule/Ng2SliderComponent.html@39:10 Can't bind to 'parent' since it isn't a known property of 'span'. (" (onInit)="initHandlers('Start', $event)" [id]="id + '-left-handle'" [ERROR ->][parent]="instance" [step]="stepX" class="slider-handle ui-slider-handle ui-state"): ng:///ImgEnhancementModule/Ng2SliderComponent.html@44:10 Can't bind to 'step' since it isn't a known property of 'span'. (" [id]="id + '-left-handle'" [parent]="instance" [ERROR ->][step]="stepX" class="slider-handle ui-slider-handle ui-state-default ui-corner-all" "): ng:///ImgEnhancementModule/Ng2SliderComponent.html@45:10 Can't bind to 'boundElement' since it isn't a known property of 'span'. (" slideAble slideDirection="horisontal" [ERROR ->]boundElement="{{id + '-ribbon'}}" [dynamicLeftLimit]="id + '-left-handle'" (onSto"): ng:///ImgEnhancementModule/Ng2SliderComponent.html@53:10 Can't bind to 'dynamicLeftLimit' since it isn't a known property of 'span'. (" slideDirection="horisontal" boundElement="{{id + '-ribbon'}}" [ERROR ->][dynamicLeftLimit]="id + '-left-handle'" (onStopSliding)="onStopSliding($event)" "): ng:///ImgEnhancementModule/Ng2SliderComponent.html@54:10 Can't bind to 'step' since it isn't a known property of 'span'. (" (onInit)="initHandlers('End', $event)" [id]="id + '-right-handle'" [ERROR ->][step]="stepX" class="slider-handle ui-slider-handle ui-state-default ui-corner-all" "): ng:///ImgEnhancementModule/Ng2SliderComponent.html@59:10 at syntaxError (http://localhost:4200/vendor.bundle.js:91969:34) at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:103089:19) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:117241:39) at http://localhost:4200/vendor.bundle.js:117161:62 at Set.forEach (native) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:117161:19) at http://localhost:4200/vendor.bundle.js:117048:19 at Object.then (http://localhost:4200/vendor.bundle.js:91958:148) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:117047:26) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:116976:37)

and my angular-cli.json file looks like

"../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/element-resize-detector/dist/element-resize-detector.min.js", "../node_modules/cropperjs/dist/cropper.js", "../node_modules/bootstrap-slider/dist/bootstrap-slider.min.js", "../node_modules/bootstrap-slider/dist/bootstrap-slider.js", "../node_modules/ng2-slider-component/ng2-slider.component.js", "../node_modules/ng2-slideable-directive/slideable.directive.js", "../node_modules/ng2-styled-directive/ng2-styled.directive.js"

and I included import { Ng2SliderComponent } from "ng2-slider-component/ng2-slider.component"; it module.ts file

and my html code looks like

<ng2-slider min="1" max="14" value="5" (onRangeChanged)="plainValueChanged($event, 'plain_1')">

[lazycodie]

Is anybody solved this problem in angular 2?If yes help me out to fix this...

[Luperco]

I gave up. I found something else.

[lazycodie]

Can you share me the link if possible of what you found?

On Sat, Apr 21, 2018 at 4:48 PM, Emanuele Benedetti < notifications@github.com> wrote:

I gave up. I found something else.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Bogdan1975/ng2-slider-component/issues/1#issuecomment-383286322, or mute the thread https://github.com/notifications/unsubscribe-auth/AkraOtkt6FHK5OEdAozd5j6Nt6L06V-nks5tqxWfgaJpZM4I8XYK .