React-a11y-range

Developer
Renaud Tertrais
Size
7,029 Kb
Views
24,288
  1. React-a11y-range Previews
  2. React-a11y-range HTML Codes
  3. React-a11y-range CSS Codes
  4. React-a11y-range JS Codes

How do I make an react-a11y-range?

What is a react-a11y-range? How do you make a react-a11y-range? This script and codes were developed by Renaud Tertrais on 12 August 2022, Friday.

React-a11y-range Previews
IQ Test

React-a11y-range - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>react-a11y-range</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/ReactDnD.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/ReactDnDHTML5Backend.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React-a11y-range - Script Codes CSS Codes

#app { padding: 50px;
}
.InputRange__slider { position: relative; height: 10px; background-color: #DDD;
}
.Handle { position: absolute; height: 20px; background-color: #555; width: 10px; margin-left: -5px; top: -5px;
}
.Handle:hover { background-color: #777;
}
.Handle:active { background-color: steelBlue;
}
.Handle:focus { outline: 3px solid DeepPink;
}
.SelectedArea { position: absolute; top: 0; background-color: orange; height: 10px;
}
.visually-hidden { opacity: 0;
}

React-a11y-range - Script Codes JS Codes

'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
console.clear();
var _ref = _;
var range = _ref.range;
var compose = _ref.compose;
var _ReactDnD = ReactDnD;
var DragSource = _ReactDnD.DragSource;
var DragLayer = _ReactDnD.DragLayer;
var DragDropContext = _ReactDnD.DragDropContext;
var HTML5Backend = ReactDnDHTML5Backend;
var _ReactDnDHTML5Backend = ReactDnDHTML5Backend;
var getEmptyImage = _ReactDnDHTML5Backend.getEmptyImage;
var KEY_CODE_LEFT = 37;
var KEY_CODE_RIGHT = 39;
var setRangeValue = function setRangeValue(key) { return key === 'min' ? setMinValue : setMaxValue;
};
var setMaxValue = function setMaxValue(rangeMax, max) { return function (_ref2) { var value = _ref2.value; return { value: _extends({}, value, { max: Math.max(value.min, Math.min(rangeMax, max)) }) }; };
};
var setMinValue = function setMinValue(rangeMin, min) { return function (_ref3) { var value = _ref3.value; return { value: _extends({}, value, { min: Math.min(value.max, Math.max(rangeMin, min)) }) }; };
};
var dashes = function dashes(x) { var dash = arguments.length <= 1 || arguments[1] === undefined ? '-' : arguments[1]; return range(0, x / 10).map(function () { return dash; }).join('');
};
var percent = function percent(x) { return x * 100 + '%';
};
// ----------- HANDLE ----------------
var source = { beginDrag: function beginDrag(_ref4) { var name = _ref4.name; return { name: name }; }
};
var collect = function collect(connect, monitor) { return { connectDragSource: connect.dragSource(), isDragging: monitor.isDragging(), dragPositionDelta: monitor.getClientOffset(), connectDragPreview: connect.dragPreview() };
};
var Handle = React.createClass({ displayName: 'Handle', componentDidMount: function componentDidMount() { // Use empty image as a drag preview so browsers don't draw it // and we can draw whatever we want on the custom drag layer instead. this.props.connectDragPreview(getEmptyImage(), { // IE fallback: specify that we'd rather screenshot the node // when it already knows it's being dragged so we can hide it with CSS. captureDraggingState: true }); }, render: function render() { var _props = this.props; var position = _props.position; var connectDragSource = _props.connectDragSource; var onKeyDown = _props.onKeyDown; var htmlFor = _props.htmlFor; var min = _props.min; var max = _props.max; var value = _props.value; var a11yValue = _props.a11yValue; var a11yLabel = _props.a11yLabel; var size = max - min; var left = percent((value - min) / size); return connectDragSource(React.createElement( 'div', null, React.createElement( 'span', { className: 'visually-hidden', id: htmlFor }, a11yLabel ), React.createElement('div', { className: 'Handle', style: { left: left }, onKeyDown: onKeyDown, role: 'slider', 'aria-labelledby': htmlFor, 'aria-valuetext': a11yValue, tabIndex: '0' }) )); }
});
var HandleContainer = DragSource('handle', source, collect)(Handle);
// --------- SELECTED AERA --------------
var SelectedArea = function SelectedArea(_ref5) { var position = _ref5.position; var value = _ref5.value; return React.createElement('div', { className: 'SelectedArea', style: { width: percent(value), left: percent(position) } });
};
// ----------- INPUT RANGE ----------------
var InputRange = React.createClass({ displayName: 'InputRange', getInitialState: function getInitialState() { return { value: this.props.value, staticValue: this.props.value }; }, handleMinChange: function handleMinChange(e) { this.changeValue('min', e.target.value); }, handleMaxChange: function handleMaxChange(e) { this.changeValue('max', e.target.value); }, changeValue: function changeValue(name, value) { this.setState(setRangeValue(name)(this.props[name], value)); this.setState(function (_ref6) { var value = _ref6.value; return { staticValue: _extends({}, value) }; }); }, handleMinKeyDown: function handleMinKeyDown(e) { this.handleKeyDown('min', e.which, e.shiftKey); }, handleMaxKeyDown: function handleMaxKeyDown(e) { this.handleKeyDown('max', e.which, e.shiftKey); }, handleKeyDown: function handleKeyDown(name, keyCode, shiftKey) { if (keyCode === KEY_CODE_LEFT) { var delta = shiftKey ? -10 : -1; this.changeValue(name, this.state.value[name] + delta); } else if (keyCode === KEY_CODE_RIGHT) { var delta = shiftKey ? 10 : 1; this.changeValue(name, this.state.value[name] + delta); } }, componentWillReceiveProps: function componentWillReceiveProps(nextProps) { var isDragging = nextProps.isDragging; var currentOffset = nextProps.currentOffset; var initialOffset = nextProps.initialOffset; var item = nextProps.item; var deltaInPixel = nextProps.deltaInPixel; var width = nextProps.width; var max = nextProps.max; var min = nextProps.min; if (isDragging) { var name = item.name; var currentValue = this.state.staticValue[name]; //staticValue.x --> max var size = max - min; var delta = deltaInPixel.x * size / width; var value = Math.round(currentValue + delta); //console.log(deltaInPixel.x, delta, size, width); this.setState(setRangeValue(name)(this.props[name], value)); } else if (this.props.isDragging) { this.setState(function (_ref7, props) { var value = _ref7.value; return { staticValue: _extends({}, value) }; }); } }, render: function render() { var _props2 = this.props; var min = _props2.min; var max = _props2.max; var step = _props2.step; var width = _props2.width; var value = this.state.value; var size = max - min; var relativeMaxValue = (value.max - min) / size; var relativeMinValue = (value.min - min) / size; var relativeSelectedValue = relativeMaxValue - relativeMinValue; return React.createElement( 'div', { className: 'InputRange', style: { width: width } }, React.createElement( 'span', { className: 'visually-hidden' }, 'You are on a price filter range. To change each limit of this range, use left and right arrow key. To increase by 10 the value, use shift plus arrow key.' ), React.createElement( 'div', { className: 'InputRange__slider', 'aria-hidden': 'true' }, React.createElement(SelectedArea, { position: relativeMinValue, value: relativeSelectedValue }), React.createElement(HandleContainer, _extends({ name: 'min', value: value.min, a11yValue: value.min, onKeyDown: this.handleMinKeyDown, htmlFor: 'input-min', a11yLabel: 'Minimum price selected' }, { min: min, max: max })), React.createElement(HandleContainer, _extends({ name: 'max', value: value.max, a11yValue: value.max, onKeyDown: this.handleMaxKeyDown, htmlFor: 'input-max', a11yLabel: 'Maximum price selected' }, { min: min, max: max })) ) ); }
});
// <pre>debug: {min}|{dashes(value.min - min)}[{value.min}]{dashes(value.max - value.min, '=')}[{value.max}]{dashes(max - value.max)}|{max}</pre>
var collectLayer = function collectLayer(monitor) { return { item: monitor.getItem(), itemType: monitor.getItemType(), initialOffset: monitor.getInitialSourceClientOffset(), currentOffset: monitor.getSourceClientOffset(), isDragging: monitor.isDragging(), deltaInPixel: monitor.getDifferenceFromInitialOffset(), clientOffset: monitor.getInitialClientOffset(), getInitialClientOffset: monitor.getInitialClientOffset(), getInitialSourceClientOffset: monitor.getInitialSourceClientOffset(), getClientOffset: monitor.getClientOffset(), getDifferenceFromInitialOffset: monitor.getDifferenceFromInitialOffset(), getSourceClientOffset: monitor.getSourceClientOffset() };
};
var InputRangeContainer = DragLayer(collectLayer)(InputRange);
var App = DragDropContext(HTML5Backend)(function () { return React.createElement(InputRangeContainer, { min: 0, max: 300, step: 1, value: { min: 0, max: 100 }, width: 300 });
});
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
React-a11y-range - Script Codes
React-a11y-range - Script Codes
Home Page Home
Developer Renaud Tertrais
Username renaudtertrais
Uploaded August 12, 2022
Rating 3
Size 7,029 Kb
Views 24,288
Do you need developer help for React-a11y-range?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Renaud Tertrais (renaudtertrais) Script Codes
Name
Flat Blog layout in CSS3
React Flat Gradient
CSS3 Transitions on grid
Images gallery with CSS3 transitions
TCP Brut Force
Console
Angular JS - Basic app
Flat CSS3 Breadcrumb
React-draggable
Flat CSS3 rating system
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!