This is a road block. What am I doing wrong?
....
/// <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: ','
})
});
// this barfs in TS — error in as title of this post
slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});
// this does too.
<HTMLElement>slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});
My TSD file contains 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' }
Thoughts?
Edit:
My IDE (PHPStorm) is hinting that there could be an error.
That points to lib.es6.d.ts
and of course noUiSlider
aint going to be there.
Edit (solution):
var slider = document.getElementById('slider') as noUiSlider.Instance;
noUiSlider.create(slider, {
//...blah...
});
slider.noUiSlider.on('update', (values, handle) => {
$input.val(values[0]);
});
Based on the linked d.ts
it seems that you need to do:
var slider: noUiSlider.Instance = document.getElementById('slider') as noUislider.Instance;
They don't seem to change the HTMLElement
interface, instead they extend it with noUiSlider.Instance
:
declare module noUiSlider {
...
interface noUiSlider {
...
}
interface Instance extends HTMLElement {
noUiSlider: noUiSlider
}
}