How to use the aurelia-slickgrid.Filters.slider function in aurelia-slickgrid
To help you get started, we’ve selected a few aurelia-slickgrid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ghiscoding / aurelia-slickgrid / client-cli / src / examples / slickgrid / example15.js View on Github 
headerKey: 'DURATION',
filterable: true,
filter: {
collection: multiSelectFilterArray,
model: Filters.multipleSelect,
searchTerms: [1, 33, 44, 50, 66], // default selection
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175
}
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete', minWidth: 70, type: FieldType.number, sortable: true, width: 100,
formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' }
},
{
id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
},
{
id: 'completed', field: 'completed', headerKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark, width: 100,
type: FieldType.boolean,
sortable: true,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];headerKey: 'DURATION',
filterable: true,
filter: {
collection: multiSelectFilterArray,
model: Filters.multipleSelect,
searchTerms: [1, 33, 44, 50, 66], // default selection
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175
}
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete', minWidth: 70, type: FieldType.number, sortable: true, width: 100,
formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' }
},
{
id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
},
{
id: 'completed', field: 'completed', headerKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark, width: 100,
type: FieldType.boolean,
sortable: true,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];validator: myCustomTitleValidator, // use a custom validator
},
filter: {
model: CustomInputFilter,
placeholder: '🔍 custom',
},
minWidth: 70
}, {
id: 'duration',
name: 'Duration (days)',
field: 'duration',
filterable: true,
minWidth: 100,
sortable: true,
type: FieldType.number,
filter: { model: Filters.slider, params: { hideSliderNumber: false } },
editor: {
model: Editors.slider,
minValue: 0,
maxValue: 100,
// params: { hideSliderNumber: true },
},
/*
editor: {
// default is 0 decimals, if no decimals is passed it will accept 0 or more decimals
// however if you pass the "decimalPlaces", it will validate with that maximum
model: Editors.float,
minValue: 0,
maxValue: 365,
// the default validation error message is in English but you can override it by using "errorMessage"
// errorMessage: this.i18n.tr('INVALID_FLOAT', { maxDecimal: 2 }),
params: { decimalPlaces: 2 },defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{filterable: true,
sortable: true,
type: FieldType.string,
editor: {
model: CustomInputEditor,
validator: myCustomTitleValidator // use a custom validator
},
minWidth: 70
}, {
id: 'duration',
name: 'Duration (days)',
field: 'duration',
filterable: true,
sortable: true,
type: FieldType.number,
filter: { model: Filters.slider, params: { hideSliderNumber: false } },
editor: {
model: Editors.slider,
minValue: 0,
maxValue: 100
// params: { hideSliderNumber: true },
},
/*
editor: {
// default is 0 decimals, if no decimals is passed it will accept 0 or more decimals
// however if you pass the "decimalPlaces", it will validate with that maximum
model: Editors.float,
minValue: 0,
maxValue: 365,
// the default validation error message is in English but you can override it by using "errorMessage"
// errorMessage: this.i18n.tr('INVALID_FLOAT', { maxDecimal: 2 }),
params: { decimalPlaces: 2 },defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimalPlaces: 1, maxDecimalPlaces: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
{ id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' } },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
minWidth: 100,
formatter: Formatters.checkmark, type: FieldType.boolean,
filterable: true, sortable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];
this.gridOptions = {
autoResize: {sortable: true
},
{
id: 'duration', name: 'Duration', field: 'duration',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'percentComplete', name: '% Complete', field: 'percentComplete',
resizable: false,
minWidth: 130, width: 140,
formatter: Formatters.percentCompleteBar,
type: FieldType.number,
filterable: true,
filter: { model: Filters.slider, operator: '>=' },
sortable: true
},
{
id: 'start', name: 'Start', field: 'start',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'finish', name: 'Finish', field: 'finish',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',aurelia-slickgrid
Slickgrid components made available in Aurelia
Package Health Score
75 / 100Popular aurelia-slickgrid functions
- aurelia-slickgrid.Aggregators.Avg
- aurelia-slickgrid.Aggregators.Sum
- aurelia-slickgrid.Editors.checkbox
- aurelia-slickgrid.Editors.date
- aurelia-slickgrid.Editors.longText
- aurelia-slickgrid.FieldType.boolean
- aurelia-slickgrid.FieldType.date
- aurelia-slickgrid.FieldType.dateIso
- aurelia-slickgrid.FieldType.number
- aurelia-slickgrid.FieldType.string
- aurelia-slickgrid.Filters.compoundDate
- aurelia-slickgrid.Filters.compoundInput
- aurelia-slickgrid.Filters.multipleSelect
- aurelia-slickgrid.Filters.singleSelect
- aurelia-slickgrid.Filters.slider
- aurelia-slickgrid.Formatters.checkmark
- aurelia-slickgrid.Formatters.dateIso
- aurelia-slickgrid.Formatters.multiple
- aurelia-slickgrid.Formatters.percentCompleteBar
- aurelia-slickgrid.OperatorType.notEqual