Skip to content
Snippets Groups Projects
Commit 5f7271fe authored by Glenn Vorhes's avatar Glenn Vorhes
Browse files

add value property to slider

parent 3805bda8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dist/react/Slider.d.ts
+ 1
− 0
View file @ 5f7271fe
...@@ -7,6 +7,7 @@ export declare class Slider extends React.Component<{ ...@@ -7,6 +7,7 @@ export declare class Slider extends React.Component<{
change: (d: number) => any; change: (d: number) => any;
steps?: number; steps?: number;
animate?: boolean; animate?: boolean;
value?: number;
}, null> { }, null> {
uid: string; uid: string;
startUid: string; startUid: string;
......
dist/react/Slider.jsx
+ 16
− 8
View file @ 5f7271fe
...@@ -68,16 +68,24 @@ var Slider = (function (_super) { ...@@ -68,16 +68,24 @@ var Slider = (function (_super) {
}; };
Slider.prototype.render = function () { Slider.prototype.render = function () {
var _this = this; var _this = this;
var theInput; var attrs = {
id: this.uid,
min: 0,
type: 'range',
onChange: function (evt) { _this.props.change(parseFloat(evt.target.value)); },
style: { width: '100%' },
max: "100",
step: '0.1'
};
if (this.props.steps) { if (this.props.steps) {
theInput = <input id={this.uid} type="range" min="0" max={this.props.steps} step={1} defaultValue="0" onChange={function (evt) { attrs.max = this.props.steps.toString();
_this.props.change(parseFloat(evt.target.value)); attrs.step = '1';
}} style={{ width: '100%' }}/>; }
if (this.props.value) {
attrs['value'] = this.props.value.toString();
} }
else { else {
theInput = <input id={this.uid} type="range" min="0" max="100" step="0.1" defaultValue="0" onChange={function (evt) { attrs['defaultValue'] = "0";
_this.props.change(parseFloat(evt.target.value));
}} style={{ width: '100%' }}/>;
} }
var start = null; var start = null;
var stop = null; var stop = null;
...@@ -106,7 +114,7 @@ var Slider = (function (_super) { ...@@ -106,7 +114,7 @@ var Slider = (function (_super) {
</span>; </span>;
} }
return <div> return <div>
{theInput} <input {...attrs}/>;
{start}{stop}{intervalSelect} {start}{stop}{intervalSelect}
</div>; </div>;
}; };
......
dist/react/Slider.jsx.map
+ 1
− 1
View file @ 5f7271fe
{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/react/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\n\r\nexport class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean }, null> {\r\n uid: string;\r\n startUid: string;\r\n endUid: string;\r\n intervalUid: string;\r\n el: HTMLInputElement;\r\n startButton: HTMLButtonElement;\r\n endButton: HTMLButtonElement;\r\n intervalSelect: HTMLSelectElement;\r\n interval: number;\r\n running: boolean;\r\n minVal: number;\r\n maxVal: number;\r\n step: number;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.endUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n }\r\n\r\n updateRunning() {\r\n\r\n this.startButton.disabled = this.running;\r\n this.el.disabled = this.running;\r\n this.endButton.disabled = !this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n console.log(parseFloat(this.el.value));\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate(){\r\n if (this.running){\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n\r\n render() {\r\n\r\n let theInput;\r\n\r\n if (this.props.steps) {\r\n theInput = <input id={this.uid}\r\n type=\"range\" min=\"0\" max={this.props.steps} step={1}\r\n defaultValue=\"0\"\r\n onChange={(evt) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n }}\r\n style={{width: '100%'}}\r\n />\r\n } else {\r\n theInput = <input id={this.uid}\r\n type=\"range\" min=\"0\" max=\"100\" step=\"0.1\"\r\n defaultValue=\"0\"\r\n onChange={(evt) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n }}\r\n style={{width: '100%'}}\r\n />\r\n }\r\n\r\n let start = null;\r\n let stop = null;\r\n let intervalSelect = null;\r\n\r\n if (this.props.animate) {\r\n start = <button id={this.startUid} onClick={() => {\r\n this.startAnimate()\r\n }}>Start</button>;\r\n\r\n stop = <button id={this.endUid} onClick={() => {\r\n this.stopAnimate()\r\n }}>Stop</button>;\r\n\r\n intervalSelect = <span>\r\n <label>Interval (s)</label>\r\n <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {this.restartAnimate()}}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div>\r\n {theInput}\r\n {start}{stop}{intervalSelect}\r\n </div>\r\n }\r\n\r\n}"]} {"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/react/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\n\r\nexport class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean, value?: number}, null> {\r\n uid: string;\r\n startUid: string;\r\n endUid: string;\r\n intervalUid: string;\r\n el: HTMLInputElement;\r\n startButton: HTMLButtonElement;\r\n endButton: HTMLButtonElement;\r\n intervalSelect: HTMLSelectElement;\r\n interval: number;\r\n running: boolean;\r\n minVal: number;\r\n maxVal: number;\r\n step: number;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.endUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n }\r\n\r\n updateRunning() {\r\n\r\n this.startButton.disabled = this.running;\r\n this.el.disabled = this.running;\r\n this.endButton.disabled = !this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n console.log(parseFloat(this.el.value));\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate(){\r\n if (this.running){\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n\r\n render() {\r\n\r\n let attrs = {\r\n id: this.uid,\r\n min: 0,\r\n type: 'range',\r\n onChange: (evt) => {this.props.change(parseFloat(evt.target.value))},\r\n style: {width: '100%'},\r\n max: \"100\",\r\n step: '0.1'\r\n };\r\n\r\n if (this.props.steps){\r\n attrs.max = this.props.steps.toString();\r\n attrs.step = '1';\r\n }\r\n\r\n if (this.props.value){\r\n attrs['value'] = this.props.value.toString()\r\n } else {\r\n attrs['defaultValue'] = \"0\";\r\n }\r\n\r\n\r\n let start = null;\r\n let stop = null;\r\n let intervalSelect = null;\r\n\r\n if (this.props.animate) {\r\n start = <button id={this.startUid} onClick={() => {\r\n this.startAnimate()\r\n }}>Start</button>;\r\n\r\n stop = <button id={this.endUid} onClick={() => {\r\n this.stopAnimate()\r\n }}>Stop</button>;\r\n\r\n intervalSelect = <span>\r\n <label>Interval (s)</label>\r\n <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {this.restartAnimate()}}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div>\r\n <input {...attrs}/>;\r\n {start}{stop}{intervalSelect}\r\n </div>\r\n }\r\n\r\n}"]}
\ No newline at end of file \ No newline at end of file
src/react/Slider.tsx
+ 21
− 21
View file @ 5f7271fe
...@@ -7,7 +7,7 @@ import {React} from './reactAndRedux'; ...@@ -7,7 +7,7 @@ import {React} from './reactAndRedux';
import makeGuid from '../util/makeGuid'; import makeGuid from '../util/makeGuid';
export class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean }, null> { export class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean, value?: number}, null> {
uid: string; uid: string;
startUid: string; startUid: string;
endUid: string; endUid: string;
...@@ -80,28 +80,28 @@ export class Slider extends React.Component<{ change: (d: number) => any, steps? ...@@ -80,28 +80,28 @@ export class Slider extends React.Component<{ change: (d: number) => any, steps?
render() { render() {
let theInput; let attrs = {
id: this.uid,
if (this.props.steps) { min: 0,
theInput = <input id={this.uid} type: 'range',
type="range" min="0" max={this.props.steps} step={1} onChange: (evt) => {this.props.change(parseFloat(evt.target.value))},
defaultValue="0" style: {width: '100%'},
onChange={(evt) => { max: "100",
this.props.change(parseFloat(evt.target.value)) step: '0.1'
}} };
style={{width: '100%'}}
/> if (this.props.steps){
attrs.max = this.props.steps.toString();
attrs.step = '1';
}
if (this.props.value){
attrs['value'] = this.props.value.toString()
} else { } else {
theInput = <input id={this.uid} attrs['defaultValue'] = "0";
type="range" min="0" max="100" step="0.1"
defaultValue="0"
onChange={(evt) => {
this.props.change(parseFloat(evt.target.value))
}}
style={{width: '100%'}}
/>
} }
let start = null; let start = null;
let stop = null; let stop = null;
let intervalSelect = null; let intervalSelect = null;
...@@ -133,7 +133,7 @@ export class Slider extends React.Component<{ change: (d: number) => any, steps? ...@@ -133,7 +133,7 @@ export class Slider extends React.Component<{ change: (d: number) => any, steps?
} }
return <div> return <div>
{theInput} <input {...attrs}/>;
{start}{stop}{intervalSelect} {start}{stop}{intervalSelect}
</div> </div>
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment