diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx
new file mode 100644
index 0000000..4c6a3e3
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+
+import isString from 'lodash/isString';
+import set from 'lodash/set';
+
+import {
+    FieldValue,
+    ObjectIndependentInput,
+    StringSpec,
+    ValidateError,
+    isStringSpec,
+} from '../../../../core';
+import {END_TIME, START_TIME} from '../../../constants/common';
+
+import {TimeRangeSelect} from './components';
+import {filterTimeArray, validateArray} from './utils';
+
+export const TimeRangeSelector: ObjectIndependentInput = (props) => {
+    const {spec, input, name, Layout} = props;
+
+    const [startTimeSpec, endTimeSpec] = React.useMemo(
+        () =>
+            [START_TIME, END_TIME].map((key) =>
+                isStringSpec(spec.properties?.[key])
+                    ? (spec.properties?.[key] as StringSpec<any, undefined, undefined>)
+                    : undefined,
+            ),
+        [spec.properties],
+    );
+
+    const {initialStartTimeOptions, initialEndTimeOptions, canBeFiltered} = React.useMemo(() => {
+        const [initialStartTimeOptions, initialEndTimeOptions] = [startTimeSpec, endTimeSpec].map(
+            (spec) => {
+                if (spec && spec.enum) {
+                    return spec.enum.map((id) => ({
+                        id,
+                        value: id,
+                        content: spec.viewSpec.selectParams?.meta?.[id] ? (
+                            <div key={id}>
+                                <Text>{spec.description?.[id] || id}</Text>
+                                <Text color="secondary" as="div">
+                                    {spec.viewSpec.selectParams.meta[id]}
+                                </Text>
+                            </div>
+                        ) : (
+                            spec.description?.[id] || id
+                        ),
+                        key: id,
+                    }));
+                }
+
+                return undefined;
+            },
+        );
+
+        const canBeFiltered =
+            initialStartTimeOptions &&
+            initialEndTimeOptions &&
+            validateArray(initialStartTimeOptions) &&
+            validateArray(initialEndTimeOptions);
+
+        return {
+            initialStartTimeOptions,
+            initialEndTimeOptions,
+            canBeFiltered,
+        };
+    }, [endTimeSpec, startTimeSpec]);
+
+    const {startTimeOptions, endTimeOptions} = React.useMemo(() => {
+        let startTimeOptions = initialStartTimeOptions;
+        let endTimeOptions = initialEndTimeOptions;
+
+        [START_TIME, END_TIME].forEach((key) => {
+            const time = input.value?.[key];
+
+            if (
+                isString(time) &&
+                canBeFiltered &&
+                initialEndTimeOptions &&
+                initialStartTimeOptions
+            ) {
+                if (START_TIME === key) {
+                    endTimeOptions = filterTimeArray(initialEndTimeOptions, time, 'greater');
+                } else {
+                    startTimeOptions = filterTimeArray(initialStartTimeOptions, time, 'less');
+                }
+            }
+        });
+
+        return {startTimeOptions, endTimeOptions};
+    }, [canBeFiltered, initialEndTimeOptions, initialStartTimeOptions, input.value]);
+
+    const parentOnChange = React.useCallback(
+        (childName: string, childValue: FieldValue, childErrors?: Record<string, ValidateError>) =>
+            input.onChange(
+                (currentValue) =>
+                    set({...currentValue}, childName.split(`${name}.`).join(''), childValue),
+                childErrors,
+            ),
+        [input, name],
+    );
+
+    if (!startTimeSpec || !endTimeSpec || !startTimeOptions || !endTimeOptions) {
+        return null;
+    }
+
+    const content = (
+        <React.Fragment>
+            <TimeRangeSelect
+                spec={startTimeSpec}
+                name={`${name}.${START_TIME}`}
+                options={startTimeOptions}
+                value={input.value?.[START_TIME]}
+                handleChange={(value) => parentOnChange(START_TIME, value[0])}
+                props={props}
+            />
+            <TimeRangeSelect
+                spec={endTimeSpec}
+                name={`${name}.${END_TIME}`}
+                options={endTimeOptions}
+                value={input.value?.[END_TIME]}
+                handleChange={(value) => parentOnChange(END_TIME, value[0])}
+                props={props}
+            />
+        </React.Fragment>
+    );
+
+    if (Layout) {
+        return <Layout {...props}>{content}</Layout>;
+    }
+
+    return <React.Fragment>{content}</React.Fragment>;
+};
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-chromium-linux.png
new file mode 100644
index 0000000..ef28a8e
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-webkit-linux.png
new file mode 100644
index 0000000..b87678f
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-chromium-linux.png
new file mode 100644
index 0000000..ec03af3
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-webkit-linux.png
new file mode 100644
index 0000000..e770a62
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-View-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-chromium-linux.png
new file mode 100644
index 0000000..49dedd8
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-webkit-linux.png
new file mode 100644
index 0000000..de73206
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-chromium-linux.png
new file mode 100644
index 0000000..2fa5dda
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-webkit-linux.png
new file mode 100644
index 0000000..1209119
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-chromium-linux.png
new file mode 100644
index 0000000..5669c6f
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-webkit-linux.png
new file mode 100644
index 0000000..f559023
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-chromium-linux.png
new file mode 100644
index 0000000..58e68ea
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-webkit-linux.png
new file mode 100644
index 0000000..fd62606
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-default-value-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-chromium-linux.png
new file mode 100644
index 0000000..9a02e58
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-webkit-linux.png
new file mode 100644
index 0000000..d32e403
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-chromium-linux.png
new file mode 100644
index 0000000..19653c8
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-webkit-linux.png
new file mode 100644
index 0000000..790aa45
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-description-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-chromium-linux.png
new file mode 100644
index 0000000..acba38f
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-webkit-linux.png
new file mode 100644
index 0000000..b47658a
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-dark-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-chromium-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-chromium-linux.png
new file mode 100644
index 0000000..ee8c22b
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-chromium-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-webkit-linux.png b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-webkit-linux.png
new file mode 100644
index 0000000..b2ff18b
Binary files /dev/null and b/src/lib/kit/components/Inputs/TimeRangeSelector/__snapshots__/TimeRangeSelector.visual.test.tsx-snapshots/TimeRangeSelector-required-light-webkit-linux.png differ
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/TimeRangeSelector.visual.test.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/TimeRangeSelector.visual.test.tsx
new file mode 100644
index 0000000..3559b42
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/TimeRangeSelector.visual.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {TIME_RANGE_SELECTOR, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('TimeRangeSelector', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.defaultValue} />);
+
+        await expectScreenshot();
+    });
+
+    test('required', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.required} />);
+
+        await expectScreenshot();
+    });
+
+    test('description', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.desription} />);
+
+        await expectScreenshot();
+    });
+});
+
+test('TimeRangeSelector View', async ({mount, expectScreenshot}) => {
+    await mount(<DynamicView spec={TIME_RANGE_SELECTOR.default} value={VALUE} />);
+
+    await expectScreenshot();
+});
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/helpers.ts b/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/helpers.ts
new file mode 100644
index 0000000..ca768aa
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/helpers.ts
@@ -0,0 +1,185 @@
+import {FormValue, ObjectSpec, SpecTypes} from '../../../../../core';
+
+const ENUM_START = [
+    '00:00',
+    '01:00',
+    '02:00',
+    '03:00',
+    '04:00',
+    '05:00',
+    '06:00',
+    '07:00',
+    '08:00',
+    '09:00',
+    '10:00',
+    '11:00',
+    '12:00',
+    '13:00',
+    '14:00',
+    '15:00',
+    '16:00',
+    '17:00',
+    '18:00',
+    '19:00',
+    '20:00',
+    '21:00',
+    '22:00',
+];
+
+const ENUM_END = [
+    '01:00',
+    '02:00',
+    '03:00',
+    '04:00',
+    '05:00',
+    '06:00',
+    '07:00',
+    '08:00',
+    '09:00',
+    '10:00',
+    '11:00',
+    '12:00',
+    '13:00',
+    '14:00',
+    '15:00',
+    '16:00',
+    '17:00',
+    '18:00',
+    '19:00',
+    '20:00',
+    '21:00',
+    '22:00',
+    '23:00',
+];
+
+export const TIME_RANGE_SELECTOR: Record<string, ObjectSpec> = {
+    default: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                enum: ENUM_START,
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                    placeholder: '00:00',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                enum: ENUM_END,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                    placeholder: '01:00',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    defaultValue: {
+        defaultValue: {
+            start: '03:00',
+            end: '06:00',
+        },
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                type: SpecTypes.String,
+                enum: ENUM_START,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                    placeholder: '00:00',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                enum: ENUM_END,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                    placeholder: '01:00',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    required: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                required: true,
+                type: SpecTypes.String,
+                enum: ENUM_START,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                    placeholder: '00:00',
+                },
+            },
+            end: {
+                required: true,
+                type: SpecTypes.String,
+                enum: ENUM_END,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                    placeholder: '01:00',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    desription: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                type: SpecTypes.String,
+                enum: ENUM_START,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                    layoutDescription: 'End of launch Description',
+                    placeholder: '00:00',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                enum: ENUM_END,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                    layoutDescription: 'End of launch Description',
+                    placeholder: '01:00',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+};
+
+export const VALUE: FormValue = {
+    start: '10:00',
+    end: '20:00',
+};
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.scss b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.scss
new file mode 100644
index 0000000..cceae73
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.scss
@@ -0,0 +1,11 @@
+@import '../../../../../styles/variables.scss';
+
+.#{$ns}time-range-select {
+    &__select {
+        min-width: 100px;
+    }
+
+    &__select-popup {
+        max-height: 250px;
+    }
+}
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx
new file mode 100644
index 0000000..61ff9e8
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+import isString from 'lodash/isString';
+
+import {Select, type SelectOption} from '@gravity-ui/uikit';
+
+import {
+    FieldObjectValue,
+    FieldValue,
+    IndependentInputProps,
+    ObjectSpec,
+    StringSpec,
+} from '../../../../../../core';
+
+import {block} from '../../../../../utils';
+
+import {Row} from '../../../../Layouts/Row';
+
+import './TimeRangeSelect.scss';
+
+const b = block('time-range-select');
+
+interface TimeRangeSelectProps {
+    spec: StringSpec<any, undefined, undefined>;
+    name: string;
+    options: SelectOption<string>[];
+    value?: FieldValue;
+    handleChange: (value: string[]) => void;
+    props: IndependentInputProps<
+        FieldObjectValue,
+        undefined,
+        undefined,
+        ObjectSpec<undefined, undefined, undefined>
+    >;
+}
+
+export const TimeRangeSelect: React.FC<TimeRangeSelectProps> = ({
+    name,
+    spec,
+    options,
+    value,
+    props,
+    handleChange,
+}) => {
+    const filterable = React.useMemo(() => (options?.length || 0) > 9, [options?.length]);
+
+    const _value = React.useMemo(() => {
+        if (isString(value)) {
+            return [value];
+        }
+
+        return undefined;
+    }, [value]);
+
+    const renderOption = React.useCallback((option: {value: string; content?: React.ReactNode}) => {
+        return <React.Fragment key={option.value}>{option.content || option.value}</React.Fragment>;
+    }, []);
+
+    const getOptionHeight = React.useCallback(() => {
+        if (spec.viewSpec.selectParams?.meta) {
+            return 44;
+        }
+
+        return 28;
+    }, [spec.viewSpec.selectParams?.meta]);
+
+    return (
+        <Row {...{...props, spec}}>
+            <Select
+                className={b('select')}
+                filterable={filterable}
+                value={_value}
+                options={options}
+                onUpdate={handleChange}
+                disabled={spec.viewSpec.disabled}
+                placeholder={spec.viewSpec.placeholder}
+                filterPlaceholder={spec.viewSpec.selectParams?.filterPlaceholder}
+                renderOption={renderOption}
+                getOptionHeight={getOptionHeight}
+                qa={name}
+                popupClassName={b('select-popup')}
+            />
+        </Row>
+    );
+};
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/index.ts b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/index.ts
new file mode 100644
index 0000000..4e5ef97
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/index.ts
@@ -0,0 +1 @@
+export * from './TimeRangeSelect';
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/components/index.ts b/src/lib/kit/components/Inputs/TimeRangeSelector/components/index.ts
new file mode 100644
index 0000000..4e5ef97
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/components/index.ts
@@ -0,0 +1 @@
+export * from './TimeRangeSelect';
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/index.ts b/src/lib/kit/components/Inputs/TimeRangeSelector/index.ts
new file mode 100644
index 0000000..0881d67
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/index.ts
@@ -0,0 +1 @@
+export * from './TimeRangeSelector';
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx
new file mode 100644
index 0000000..3826508
--- /dev/null
+++ b/src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+
+export const filterTimeArray = (
+    times: {id: string; value: string; content: string | JSX.Element; key: string}[],
+    cutoff: string,
+    direction: 'greater' | 'less',
+) => {
+    const isTimeFormat = (value: string) => /^\d{1,2}:\d{2}$/.test(value);
+
+    const compareValues = (a: string, b: string) => {
+        if (isTimeFormat(a) && isTimeFormat(b)) {
+            return direction === 'less' ? a >= b : a <= b;
+        } else {
+            const aNum = parseInt(a, 10);
+            const bNum = parseInt(b, 10);
+
+            return direction === 'less' ? aNum >= bNum : aNum <= bNum;
+        }
+    };
+
+    return times.map((time) => {
+        const disabled = compareValues(time.value, cutoff);
+
+        return {
+            ...time,
+            content: disabled ? <Text color="secondary">{time.content}</Text> : time.content,
+            disabled,
+        };
+    });
+};
+
+export const validateArray = (arr: {value: string}[]) =>
+    arr.every((obj) => /^(\d+|\d{1,2}:\d{1,2})$/.test(obj.value));
diff --git a/src/lib/kit/components/Inputs/index.ts b/src/lib/kit/components/Inputs/index.ts
index e215aaf..1bb0c6b 100644
--- a/src/lib/kit/components/Inputs/index.ts
+++ b/src/lib/kit/components/Inputs/index.ts
@@ -19,3 +19,4 @@ export * from './Text';
 export * from './TextArea';
 export * from './TextContent';
 export * from './TextLink';
+export * from './TimeRangeSelector';
diff --git a/src/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.tsx b/src/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.tsx
new file mode 100644
index 0000000..83f4c3f
--- /dev/null
+++ b/src/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import cloneDeep from 'lodash/cloneDeep';
+
+import {ObjectIndependentView, ViewController, isStringSpec} from '../../../../core';
+import {END_TIME, START_TIME} from '../../../constants/common';
+
+export const TimeRangeSelectorView: ObjectIndependentView = ({
+    value,
+    spec,
+    name,
+    Layout,
+    ...restProps
+}) => {
+    const {startTimeSpec, endTimeSpec} = React.useMemo(() => {
+        const [startTimeSpec, endTimeSpec] = [START_TIME, END_TIME].map((key) => {
+            if (spec.properties?.[key] && isStringSpec(spec.properties[key])) {
+                const _spec = cloneDeep(spec.properties[key]);
+
+                _spec.viewSpec.layout = 'row';
+
+                return _spec;
+            }
+
+            return undefined;
+        });
+
+        return {startTimeSpec, endTimeSpec};
+    }, [spec.properties]);
+
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+
+    const content = (
+        <React.Fragment>
+            <ViewController spec={startTimeSpec} name={`${name ? name + '.' : ''}${START_TIME}`} />
+            <ViewController spec={endTimeSpec} name={`${name ? name + '.' : ''}${END_TIME}`} />
+        </React.Fragment>
+    );
+
+    if (Layout) {
+        return (
+            <Layout spec={spec} name={name} value={value} {...restProps}>
+                {content}
+            </Layout>
+        );
+    }
+
+    return <React.Fragment>{content}</React.Fragment>;
+};
diff --git a/src/lib/kit/components/Views/TimeRangeSelectorView/index.ts b/src/lib/kit/components/Views/TimeRangeSelectorView/index.ts
new file mode 100644
index 0000000..588b6ef
--- /dev/null
+++ b/src/lib/kit/components/Views/TimeRangeSelectorView/index.ts
@@ -0,0 +1 @@
+export * from './TimeRangeSelectorView';
diff --git a/src/lib/kit/components/Views/index.ts b/src/lib/kit/components/Views/index.ts
index d75e19e..a63c986 100644
--- a/src/lib/kit/components/Views/index.ts
+++ b/src/lib/kit/components/Views/index.ts
@@ -13,4 +13,5 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './TimeRangeSelectorView';
 export * from './DateView';
diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts
index acfcff4..97ceca7 100644
--- a/src/lib/kit/constants/common.ts
+++ b/src/lib/kit/constants/common.ts
@@ -5,3 +5,6 @@ export const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 't
 export const COMMON_TITLE_MAX_WIDTH = 533;
 
 export const OBJECT_VALUE_PROPERTY_NAME = 'value';
+
+export const START_TIME = 'start';
+export const END_TIME = 'end';
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index a9fd1ba..187c888 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/src/lib/kit/constants/config.tsx
@@ -54,6 +54,8 @@ import {
     TextContent,
     TextLink,
     TextLinkView,
+    TimeRangeSelector,
+    TimeRangeSelectorView,
     Transparent,
     ViewAccordeon,
     ViewAccordeonCard,
@@ -142,6 +144,7 @@ export const dynamicConfig: DynamicFormConfig = {
             multi_oneof: {Component: MultiOneOf, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlat, independent: true},
             inline: {Component: ObjectInline, independent: true},
+            time_range_selector: {Component: TimeRangeSelector, independent: true},
         },
         layouts: {
             row: Row,
@@ -248,6 +251,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             multi_oneof: {Component: MultiOneOfView, independent: true},
             multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true},
             inline: {Component: ObjectInlineView, independent: true},
+            time_range_selector: {Component: TimeRangeSelectorView, independent: true},
         },
         layouts: {
             row: ViewRow,
diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
index 63e2598..cceec85 100644
--- a/src/stories/Editor.stories.tsx
+++ b/src/stories/Editor.stories.tsx
@@ -104,6 +104,82 @@ const spec: ObjectSpec = {
                                 layoutTitle: 'Non-working days',
                             },
                         },
+                        working_hours: {
+                            type: SpecTypes.Object,
+                            properties: {
+                                start: {
+                                    type: SpecTypes.String,
+                                    enum: [
+                                        '00:00',
+                                        '01:00',
+                                        '02:00',
+                                        '03:00',
+                                        '04:00',
+                                        '05:00',
+                                        '06:00',
+                                        '07:00',
+                                        '08:00',
+                                        '09:00',
+                                        '10:00',
+                                        '11:00',
+                                        '12:00',
+                                        '13:00',
+                                        '14:00',
+                                        '15:00',
+                                        '16:00',
+                                        '17:00',
+                                        '18:00',
+                                        '19:00',
+                                        '20:00',
+                                        '21:00',
+                                        '22:00',
+                                    ],
+                                    viewSpec: {
+                                        type: 'select',
+                                        layout: 'row',
+                                        layoutTitle: 'The begining of the work day',
+                                    },
+                                },
+                                end: {
+                                    type: SpecTypes.String,
+                                    enum: [
+                                        '01:00',
+                                        '02:00',
+                                        '03:00',
+                                        '04:00',
+                                        '05:00',
+                                        '06:00',
+                                        '07:00',
+                                        '08:00',
+                                        '09:00',
+                                        '10:00',
+                                        '11:00',
+                                        '12:00',
+                                        '13:00',
+                                        '14:00',
+                                        '15:00',
+                                        '16:00',
+                                        '17:00',
+                                        '18:00',
+                                        '19:00',
+                                        '20:00',
+                                        '21:00',
+                                        '22:00',
+                                        '23:00',
+                                    ],
+                                    viewSpec: {
+                                        type: 'select',
+                                        layout: 'row',
+                                        layoutTitle: 'End of the working day',
+                                    },
+                                },
+                            },
+                            viewSpec: {
+                                type: 'time_range_selector',
+                                layoutTitle: 'Working hours',
+                                layoutDescription: 'transparent',
+                            },
+                        },
                         birthday: {
                             type: SpecTypes.String,
                             viewSpec: {
diff --git a/src/stories/ObjectTimeRangeSelector.stories.tsx b/src/stories/ObjectTimeRangeSelector.stories.tsx
new file mode 100644
index 0000000..34b7600
--- /dev/null
+++ b/src/stories/ObjectTimeRangeSelector.stories.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+
+import {StoryFn} from '@storybook/react';
+
+import {ObjectSpec, SpecTypes, TimeRangeSelector as TimeRangeSelectorBase} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Object/TimeRangeSelector',
+    component: TimeRangeSelectorBase,
+};
+
+const baseSpec: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        start: {
+            type: SpecTypes.String,
+            enum: [
+                '00:00',
+                '01:00',
+                '02:00',
+                '03:00',
+                '04:00',
+                '05:00',
+                '06:00',
+                '07:00',
+                '08:00',
+                '09:00',
+                '10:00',
+                '11:00',
+                '12:00',
+                '13:00',
+                '14:00',
+                '15:00',
+                '16:00',
+                '17:00',
+                '18:00',
+                '19:00',
+                '20:00',
+                '21:00',
+                '22:00',
+            ],
+            viewSpec: {
+                type: 'select',
+                layout: 'row',
+                layoutTitle: 'Start of launch',
+                placeholder: '00:00',
+                selectParams: {
+                    filterPlaceholder: 'Start time',
+                },
+            },
+        },
+        end: {
+            type: SpecTypes.String,
+            enum: [
+                '01:00',
+                '02:00',
+                '03:00',
+                '04:00',
+                '05:00',
+                '06:00',
+                '07:00',
+                '08:00',
+                '09:00',
+                '10:00',
+                '11:00',
+                '12:00',
+                '13:00',
+                '14:00',
+                '15:00',
+                '16:00',
+                '17:00',
+                '18:00',
+                '19:00',
+                '20:00',
+                '21:00',
+                '22:00',
+                '23:00',
+            ],
+            viewSpec: {
+                type: 'select',
+                layout: 'row',
+                layoutTitle: 'End of launch',
+                placeholder: '01:00',
+                selectParams: {
+                    filterPlaceholder: 'End time',
+                },
+            },
+        },
+    },
+    viewSpec: {
+        type: 'time_range_selector',
+        layout: 'transparent',
+    },
+};
+
+const excludeOptions = [
+    'description',
+    'validator',
+    'viewSpec.type',
+    'viewSpec.order',
+    'viewSpec.layoutOpen',
+    'viewSpec.disabled',
+    'viewSpec.oneOfParams',
+    'viewSpec.placeholder',
+    'viewSpec.delimiter',
+    'viewSpec.inputProps',
+];
+
+const template = (spec: ObjectSpec = baseSpec) => {
+    const Template: StoryFn<typeof TimeRangeSelectorBase> = (__, {viewMode}) => (
+        <InputPreview spec={spec} excludeOptions={excludeOptions} viewMode={viewMode} />
+    );
+
+    return Template;
+};
+
+export const TimeRangeSelector = template();
diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
index 2150375..0ddd8eb 100644
--- a/src/stories/components/InputPreview/constants.ts
+++ b/src/stories/components/InputPreview/constants.ts
@@ -518,6 +518,26 @@ const fileInput: ObjectSpec = {
     },
 };
 
+const timeRangeSelectorParams: ObjectSpec = {
+    type: SpecTypes.Object,
+    properties: {
+        timeStep: {
+            type: SpecTypes.Number,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Time step',
+                layoutDescription: 'The step is set in minutes',
+            },
+        },
+    },
+    viewSpec: {
+        type: 'base',
+        layout: 'accordeon',
+        layoutTitle: 'Time Range Selector',
+    },
+};
+
 const dateInput: ObjectSpec = {
     type: SpecTypes.Object,
     properties: {
@@ -748,6 +768,7 @@ export const getObjectOptions = (): ObjectSpec => ({
                 placeholder,
                 hidden,
                 delimiter,
+                timeRangeSelectorParams,
             },
             [
                 'disabled',
@@ -761,6 +782,7 @@ export const getObjectOptions = (): ObjectSpec => ({
                 'placeholder',
                 'hidden',
                 'delimiter',
+                'timeRangeSelectorParams',
             ],
         ),
     },