Running into a roadblock here. What mistake am I making?
....
/// <reference path="../../../typings/tsd.d.ts" />
var slider:HTMLElement = document.getElementById('slider');
noUiSlider.create(slider, {
start: +$input.val(),
step: +$input.prop('step'),
behaviour: 'tap',
range: {
'min': +$input.prop('min'),
'max': +$input.prop('max')
},
format: wNumb({
decimals: 0,
thousand: ','
})
});
// encountering an error in TypeScript — mentioned in the title of this post
slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});
// another error shows up too.
<HTMLElement>slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});
The TSD file I have includes the nouislider typing from https://github.com/retyped/nouislider-tsd-ambient/blob/master/nouislider.d.ts
Error details:
{ [TypeScript error: resources/assets/typescript/common.ts(44,25): Error TS2339: Property 'noUiSlider' does not exist on type 'HTMLElement'.]
message: 'resources/assets/typescript/common.ts(44,25): Error TS2339: Property \'noUiSlider\' does not exist on type \'HTMLElement\'.',
fileName: 'resources/assets/typescript/common.ts',
line: 44,
column: 25,
name: 'TypeScript error' }
Any ideas?
Edit:
My IDE (PHPStorm) is suggesting there might be an issue. https://i.sstatic.net/HVqqN.png
This points to lib.es6.d.ts, where obviously noUiSlider won't be found.
https://i.sstatic.net/9USS1.png
Edit (solution):
var slider = document.getElementById('slider') as noUiSlider.Instance;
noUiSlider.create(slider, {
//...blah...
});
slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});