Input Spinner
A React plugin to create input spinner elements for number input.
Basic example
An input number spinner based on React-Bootstrap for React.
import React from 'react';
import { Col, Row } from 'react-bootstrap';
import InputSpinner from 'react-bootstrap-input-spinner';
const InputSpinnerBasicExample = () => {
return (
<Row>
<Col>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'real'}
max={100}
min={0}
step={1}
value={0}
/>
</Col>
</Row>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'float'}
precision={2}
max={9}
min={0}
step={0.1}
value={4.5}
variant="dark"
/>
</Col>
</Row>
</Col>
</Row>
);
}
export default InputSpinnerBasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Button Labels
Usearrows={true} props for < and > button labels instead of - and + .
import React from 'react';
import { Col, Row } from 'react-bootstrap';
import InputSpinner from 'react-bootstrap-input-spinner';
const InputSpinnerButtonLabel = () => {
return (
<Row>
<Col>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'real'}
max={100}
min={0}
step={1}
value={0}
arrows={true}
/>
</Col>
</Row>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'float'}
precision={2}
max={9}
min={0}
step={0.1}
value={4.5}
variant="dark"
arrows={true}
/>
</Col>
</Row>
</Col>
</Row>
);
}
export default InputSpinnerButtonLabel;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Sizing
Add the relative form input group sizing props size = "sm" | "lg" for additional sizes
import React from 'react';
import { Col, Row } from 'react-bootstrap';
import InputSpinner from 'react-bootstrap-input-spinner';
const InputSpinnerSizes = () => {
return (
<Row>
<Col>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'real'}
max={100}
min={0}
step={10}
value={30}
size="sm"
/>
</Col>
</Row>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'real'}
max={100}
min={0}
step={10}
value={30}
/>
</Col>
</Row>
<Row className="mb-3">
<Col md={6} sm={12} xs={12}>
<InputSpinner
type={'real'}
max={100}
min={0}
step={10}
value={80}
size="lg"
/>
</Col>
</Row>
</Col>
</Row>
);
}
export default InputSpinnerSizes;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.