diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index 3d5fda213e07b3e636f84154152a713d3867ed86..b688506b0a42d81888916002f07872f3371d92ee 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -99,7 +99,7 @@ export class BoolControl extends SimpleParam<PD.Boolean> {
 }
 
 export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGraph>, { isExpanded: boolean, isOverPoint: boolean, message: string }> {
-    state = { 
+    state = {
         isExpanded: false,
         isOverPoint: false,
         message: `${this.props.param.defaultValue.length} points`,
@@ -107,7 +107,7 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
 
     onHover = (point?: Vec2) => {
         this.setState({isOverPoint: !this.state.isOverPoint});
-        if(point){
+        if (point) {
             this.setState({message: `(${point[0].toFixed(2)}, ${point[1].toFixed(2)})`});
             return;
         }
@@ -140,8 +140,8 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
             </div>
             <div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
                 <LineGraphComponent
-                    data={this.props.param.defaultValue} 
-                    onChange={this.onChange} 
+                    data={this.props.param.defaultValue}
+                    onChange={this.onChange}
                     onHover={this.onHover}
                     onDrag={this.onDrag}/>
             </div>
@@ -193,8 +193,14 @@ export class TextControl extends SimpleParam<PD.Text> {
     }
 }
 
-export class SelectControl extends SimpleParam<PD.Select<any>> {
-    onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { this.update(e.target.value); }
+export class SelectControl extends SimpleParam<PD.Select<string | number>> {
+    onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        if (typeof this.props.param.defaultValue === 'number') {
+            this.update(parseInt(e.target.value, 10));
+        } else {
+            this.update(e.target.value);
+        }
+    }
     renderControl() {
         return <select value={this.props.value || ''} onChange={this.onChange} disabled={this.props.isDisabled}>
             {this.props.param.options.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts
index b618052cfe18649afff4fca1d3624f9195b2654d..f8c06ec58624f487aa0e3775ab7191c6ef1b628f 100644
--- a/src/mol-util/param-definition.ts
+++ b/src/mol-util/param-definition.ts
@@ -42,12 +42,12 @@ export namespace ParamDefinition {
         return setInfo<Value<T>>({ type: 'value', defaultValue }, info);
     }
 
-    export interface Select<T extends string> extends Base<T> {
+    export interface Select<T extends string | number> extends Base<T> {
         type: 'select'
         /** array of (value, label) tuples */
         options: [T, string][]
     }
-    export function Select<T extends string>(defaultValue: T, options: [T, string][], info?: Info): Select<T> {
+    export function Select<T extends string | number>(defaultValue: T, options: [T, string][], info?: Info): Select<T> {
         return setInfo<Select<T>>({ type: 'select', defaultValue, options }, info)
     }