jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

React UI Components

  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

React UI Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxDockingLayout

jqxRangeSelector

  • Default Functionality
  • Date Scale
  • Time Scale
  • Numeric Scale
  • Negative Scale
  • Decimal Scale
  • Background Image
  • Chart on Background
  • RangeSelector as a Filter
  • Fluid Size
  • Customized Markers
  • Right to Left Layout
Theme:
Light
  • Demo
  • App.htm
  • App.js
ReactJS Range Selector demo. RangeSelector - Time Scale
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Range Selector demo. RangeSelector - Time Scale
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxrangeselector.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom: 3em">
        ReactJS Range Selector demo. RangeSelector - Time Scale
    </div>
    <div id="app"></div>
    <script src="../build/rangeselector_timescale.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxRangeSelector from '../../../jqwidgets-react/react_jqxrangeselector.js';

class App extends React.Component {
    render() {
        return (
            <JqxRangeSelector ref='myRangeSelector'
                width={750}
                height={100}
                min={new Date(2014, 5, 1, 0, 0, 0)}
                max={new Date(2014, 5, 1, 24, 0, 0)}
                labelsOnTicks={false}
                range={{ from: new Date(2014, 5, 1, 4, 0, 0), to: new Date(2014, 5, 1, 12, 0, 0) }}
                majorTicksInterval={{ hours: 4 }}
                minorTicksInterval={{ minutes: 30 }}
                labelsFormat={'hh:mm tt'}
                markersFormat={'hh:mm tt'}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2019. All Rights Reserved.