Hi Team,
I have created a new “Range slider” component in SSD for my project, I am trying to dynamically set the min and max attribute from page variable.
I tried with both property binding[min] and [max] and also using {{}} operator, but the value is not rendering in range field
HTML file:
<evo-range-slider min="{{page.min}}" max="{{page.max}}" step="1" prefix="$\[" suffix="\]" \[min\]="page.min" \[max\]="page.max"></evo-range-slider>
</div>
<div class="pb-6">
<p>Min: {{ page.min }} | Max: {{ page.max }}</p>
</div>
Template :
get template() {
let Component = require('@jatahworx/bhive-toolkits').Component;
let Attribute = require('@jatahworx/bhive-toolkits').Attribute;
module.exports = class EvoRangeSlider extends Component {
constructor() {
const name = "evo-range-slider";
const designerTemplate = `<div class=\"drop\" component-label="Evo Range Slider"></div>`;
const paletteTemplate = "Evo range slider";
const componentLabel = "Evo range slider";
const templateUrl = '';
const visible = true;
super({
name,
designerTemplate,
paletteTemplate,
componentLabel,
templateUrl,
visible
});
super.addAttribute(
new Attribute({
key: 'min',
value: '0',
type: 'kv'
})
);
super.addAttribute(
new Attribute({
key: 'max',
value: '100',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: 'step',
value: '1',
type: 'kv'
})
);
// super.addAttribute(
// new Attribute({
// key: 'default-value',
// value: '0',
// type: 'kv'
// })
// );
super.addAttribute(
new Attribute({
key: '[(ngModel)]',
value: '',
type: 'kv'
})
);
super.addAttribute(
new Attribute({
key: 'input-id',
value: '',
type: 'kv'
})
);
super.addAttribute(
new Attribute({
key: 'title-copy',
value: '',
type: 'kv'
})
);
super.addAttribute(
new Attribute({
key: 'custom-min-label',
value: '',
type: 'kv'
})
);
super.addAttribute(
new Attribute({
key: 'custom-max-label',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: 'prefix',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: 'suffix',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: 'error-messages',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: '[a11y-aria-required]',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: 'a11y-aria-label',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: '(change)',
value: '',
type: 'kv',
})
);
super.addAttribute(
new Attribute({
key: '(input)',
value: '',
type: 'kv',
})
);
super.setType(Component.COMPONENT_TYPE_TITLES.OTHERS.val);
}
get template() {
const template = `<evo-range-slider %min% %max% %step% %[(ngModel)]% %input-id% %title-copy% %custom-min-label% %custom-max-label% %prefix% %suffix% %error-messages% %[a11y-aria-required]% %a11y-aria-label% %(change)% %(input)% %bCustomProps%></evo-range-slider>`;
return template;
}
set template(templateString) { }
}
