coreui-free-react-admin-template

1
import React from 'react'
2
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Range = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Range</strong> <small></small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <p className="text-body-secondary small">
15
              Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
16
              <code>&lt;CFormRange&gt;</code>.
17
            </p>
18
            <DocsExample href="forms/range" tabContentClassName="bg-opacity-10">
19
              <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
20
              <CFormRange id="customRange1" />
21
            </DocsExample>
22
          </CCardBody>
23
        </CCard>
24
      </CCol>
25
      <CCol xs={12}>
26
        <CCard className="mb-4">
27
          <CCardHeader>
28
            <strong>React Range</strong> <small>Disabled</small>
29
          </CCardHeader>
30
          <CCardBody>
31
            <p className="text-body-secondary small">
32
              Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
33
              appearance and remove pointer events.
34
            </p>
35
            <DocsExample href="forms/range#disabled" tabContentClassName="bg-opacity-10">
36
              <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
37
              <CFormRange id="disabledRange" disabled />
38
            </DocsExample>
39
          </CCardBody>
40
        </CCard>
41
      </CCol>
42
      <CCol xs={12}>
43
        <CCard className="mb-4">
44
          <CCardHeader>
45
            <strong>React Range</strong> <small>Min and max</small>
46
          </CCardHeader>
47
          <CCardBody>
48
            <p className="text-body-secondary small">
49
              Range inputs have implicit values for <code>min</code> and <code>max</code>—
50
              <code>0</code> and <code>100</code>, respectively. You may specify new values for
51
              those using the <code>min</code> and <code>max</code> attributes.
52
            </p>
53
            <DocsExample href="forms/range#min-and-max" tabContentClassName="bg-opacity-10">
54
              <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
55
              <CFormRange min={0} max={5} defaultValue="3" id="customRange2" />
56
            </DocsExample>
57
          </CCardBody>
58
        </CCard>
59
      </CCol>
60
      <CCol xs={12}>
61
        <CCard className="mb-4">
62
          <CCardHeader>
63
            <strong>React Range</strong> <small>Steps</small>
64
          </CCardHeader>
65
          <CCardBody>
66
            <p className="text-body-secondary small">
67
              By default, range inputs &#34;snap&#34; to integer values. To change this, you can
68
              specify a <code>step</code> value. In the example below, we double the number of steps
69
              by using <code>step=&#34;0.5&#34;</code>.
70
            </p>
71
            <DocsExample href="forms/range#steps" tabContentClassName="bg-opacity-10">
72
              <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
73
              <CFormRange min={0} max={5} step={0.5} defaultValue="3" id="customRange3" />
74
            </DocsExample>
75
          </CCardBody>
76
        </CCard>
77
      </CCol>
78
    </CRow>
79
  )
80
}
81

82
export default Range
83