If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.

Here is my example (ported from the regular form to the store configuration section):
Field in the system.xml
:
<field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Delivery Time</label>
<frontend_model>MageWorx\ExampleConfig\Model\Config\FrontendModel\DeliveryTime</frontend_model>
</field>
Note: real values will be stored with the delivery_time_from
and delivery_time_to
indexes.
Frontend model, where I have replaced the default output of the element:
<?php
namespace MageWorx\ExampleConfig\Model\Config\FrontendModel;
class DeliveryTime extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* Retrieve element HTML markup
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
* @throws \Magento\Framework\Exception\LocalizedException
*/
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$renderer = $this->getLayout()->createBlock(
'MageWorx\ExampleConfig\Block\TimeSlider'
);
$renderer->setElement($element);
return $renderer->toHtml();
}
}
here we just using a block MageWorx\ExampleConfig\Block\TimeSlider
instead of general render.
And here is the block with template (where slider was defined):
<?php
namespace MageWorx\ExampleConfig\Block;
use Magento\Framework\Data\Form\Element\AbstractElement;
/**
* Class TimeSlider
*/
class TimeSlider extends \Magento\Framework\View\Element\Template implements
\Magento\Framework\Data\Form\Element\Renderer\RendererInterface,
\Magento\Widget\Block\BlockInterface
{
const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';
/**
* Form element which re-rendering
*
* @var \Magento\Framework\Data\Form\Element\Fieldset
*/
protected $element;
/**
* @var string
*/
protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';
/**
* @var string
*/
protected $_htmlId = 'time-range';
/**
* Retrieve an element
*
* @return \Magento\Framework\Data\Form\Element\Fieldset
*/
public function getElement()
{
return $this->element;
}
/**
* Set an element
*
* @param AbstractElement $element
* @return $this
*/
public function setElement(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$this->element = $element;
return $this;
}
/**
* Render element
*
* @param AbstractElement $element
* @return string
*/
public function render(AbstractElement $element)
{
$this->element = $element;
return $this->toHtml();
}
/**
* @return string
*/
public function getHtmlId()
{
return $this->_htmlId;
}
/**
* @return string
*/
public function getNameFrom()
{
return self::TIME_NAME_FROM;
}
/**
* @return string
*/
public function getNameTo()
{
return self::TIME_NAME_TO;
}
/**
* @param int $minutes
* @return string
*/
public function minutesToTime($minutes)
{
$hours = floor($minutes / 60);
$minutes = $minutes % 60;
$part = $hours >= 12 ? 'PM' : 'AM';
return sprintf('%02d:%02d %s', $hours, $minutes, $part);
}
/**
* @return string
* @throws \Magento\Framework\Exception\ValidatorException
*/
protected function _toHtml()
{
if (!$this->getTemplate()) {
return '';
}
return $this->fetchView($this->getTemplateFile());
}
}
Note: you should change values of the constants TIME_NAME_FROM
and TIME_NAME_TO
to own ones, according your definition in the system.xml
.
Template:
<?php
/** @var MageWorx\ExampleConfig\Block\TimeSlider $block */
$element = $block->getElement();
$form = $element->getForm();
/** @var \Magento\Config\Block\System\Config\Form $parentForm */
$parentForm = $form->getParent();
$timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
$timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
?>
<div id="time-range" class="field field-time_range">
<label class="label" style="white-space: normal;">
<?php echo __('Time Range: ');?>
<span class="slider-time">
<?php echo $block->minutesToTime($timeFrom);?>
</span>
<?php echo ' - '; ?>
<span class="slider-time2">
<?php echo $block->minutesToTime($timeTo);?>
</span>
</label>
<div class="sliders_step1 control">
<div id="slider-range"></div>
<input type="hidden"
name="<?php echo $block->getNameFrom();?>"
value="<?php echo $timeFrom?>""
/>
<input type="hidden"
name="<?php echo $block->getNameTo();?>"
value="<?php echo $timeTo?>""
/>
</div>
</div>
<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($){
$("#slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else if (hours2 == 24) {
hours2 = 11;
minutes2 = "59 PM";
} else {
hours2 = hours2 - 12;
minutes2 = minutes2 + " PM";
}
} else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
$('.slider-time2').html(hours2 + ':' + minutes2);
$('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
$('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);
}
});
});
</script>
That's all. Based on this example you can modify code to add base features like a use global value etc.
Here is full code on the GitHub.
PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).
PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.